如何仅将 css 样式应用于特定的 Vue 组件及其子组件？

Posted 2023-02-23

【中文标题】如何仅将 css 样式应用于特定的 Vue 组件及其子组件？

【英文标题】：How to apply css style only for specific Vue component and its child?

【发布时间】：2019-09-12 04:25:24

【问题描述】：

我的Vue项目使用Vue.Router。

我想从父组件中为 子组件 应用 css 样式。 但是，我在父组件中定义了 CSS 样式，它不适用于 子组件。 和我的样式表使用相同的类或 id 选择器。

像一击：

list-one.css

.foo bar 
    width: 120px;

not-related-for-list-one.css

.foo bar 
    width: 200px;

两个示例 css 文件使用不同的 Vue 组件（ListOne.vue，NotForListOne.vue）

在父级（Vue 组件，ListOne.vue）中，我定义了多种 CSS 样式，如下所示：

<style src="my/css/file/path/list-one.css" scope> <script>import "my/css/file/path/list-one.css"</script> <style scope>my css style here</style>

“1”仅适用于父组件(ListOne.vue)。

'2' 全局应用（list-one.css 和 not-related-for-list- one.css 都应用了ListOne.vue）因为NotForListOne.vue 有 <script>import "my/css/file/path/not-related-for-list-one.css"</script>.

“3”与“1”相同。

ListOne.vue

<child-one></child-one>
<child-two></child-two>
<and-other-childs></and-other-childs>

list-one.css

/* it for ListOne.vue only */
.foo bar 
    width: 120px;



/* it for chile-one only */
.foo1 bar 
    display: none;


/* it for chile-two only */
.foo2 bar 
    color: red;


.
.
.

我认为最好的方法是：

ListOne.vue

....

<style>
.foo bar 
    width: 120px;

</style>

ChildOne.vue

<style>
.foo1 bar 
    display: none;

</style>

ChildTwo.vue

<style>
.foo2 bar 
    color: red;

</style>

但是 css 文件太大了，要为它的 Vue 组件拆分 css 非常困难。

如何解决？

【参考方案1】：

<style scope>my css style here</style>

尝试从style 标记中删除scope。

【讨论】：

请确认这是否适合您，以便其他人知道这是否有帮助:)