Question

我正在构建具有一定范围内样式的Vue JS plguin，当将它作为组件（例如：<my-component></my-component>）包含在内时，它可以在另一个网站中完美地运行。

但是，我添加到组件的样式是scoped到组件，这意味着它不会影响父级的站点样式，但是父级的站点样式会影响我组件的样式，是否存在防止这种情况的方法，而不必过度依赖组件的样式并针对所有内容使用!important？

Answer 1

作用域样式通过向选择器添加特殊键来起作用。因此，您的组件将不影响其他组件。父组件仍可能影响您的组件样式。全局样式也可以干预。

好吧，如果您不想使用!important

，则有两种选择

首先，也是首选-使用特定的BEM命名。使用sass（scss）确实很容易实现。例如

.mycompoment{
    background:#fff;

    &--body{
        color:#eb0b0;

        &--title{
            font-size:5rem;
        }
    }
    &--footer{
    position:relative;
    }
    //etc
}

它将编译为以下CSS：

.mycompoment {
    background: #fff;
}

.mycompoment--body {
    color: #eb0b0;
}

.mycompoment--body--title {
    font-size: 5rem;
}

.mycompoment--footer {
    position: relative;
}

另一个选择是提高选择器的特异性。尝试使用更多直接后代选择器。 > 但是，外部CSS仍可能会影响您甚至没有想到要指定的值。例如position:absolute; top:-20px;或框大小/显示/不透明度以及您不知道的许多其他道具。

防止父网站样式影响Vue JS组件样式

1 个答案: