Vue 引入样式Scoped不起错用,解决方案
一、Vue 引入样式Scoped不起错用出现环境:在vue组件中使用了scoped,发现手写的标签样式起作用,但是第三方的组件标签并没有起作用 原因: 1. 先搞清楚scoped的布局实现 在style上加上scoped后 会对 style里面加了样式的标签 每个加上一个 像这样的一个属性 data-v-4686dc05 组件内的样式只会对带有这个标签的dom元素生效,因此
·
一、Vue 引入样式Scoped不起错用
出现环境:在vue组件中使用了scoped,发现手写的标签样式起作用,但是第三方的组件标签并没有起作用
原因:
1. 先搞清楚scoped的布局实现
在style上加上scoped后 会对 style里面加了样式的标签 每个加上一个 像这样的一个属性
data-v-4686dc05
组件内的样式只会对带有这个标签的dom元素生效,因此加上scoped后,组件内的样式不会影响组件外。
官方文档
2. scoped 只会作用于自组件的根组件
官方解释:使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响
二、解决方案
加上一个不带scoped的style 即可起作用了。
<style src="../assets/index.css" scoped></style>
<!--添加个空的style 占位-->
<style>
</style>
更多:
vue3线上环境组件重新渲染echarts图表无法正常显示问题
Vue3+element-plus 搭建教程整理
Vue3 npm ERR code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC
更多推荐
已为社区贡献11条内容
所有评论(0)