Vue在组件里写 css 给 <style>
标签加上 scoped
,比如: <style lang="less" scoped>
,这样的 css 就是局部的,不会影响其他组件。
假设引入了一个子组件,并希望在组件中修改子组件的样式,由于用了 scoped
,直接修改是不生效的。去掉 scoped
是可以的,不过没了局部 css
风险不可控。这时可以使用深度选择器修改,比如 less
中的 /deep/
。
例如:dp.table-tools是引用的公共vue组件,添加lang="less" scoped确保此样式只在本组件生效,添加/deep/修改它的高度