为同一组件编写不同css或scs的最佳方法是什么

Question

想象一下，我有一个像下拉菜单这样的复杂组件，当我在不同的地方使用它时，我希望它有一些自定义样式。不仅是颜色，还有间距和图标。

如果我使用react或vue之类的东西，我可以将参数传递给道具。

我们也可以只使用scs，并且有很多方法可以覆盖样式：

.dropdown{
width: 100px
}
//overwrite for my custom menu
.my-custom-menu{
.dropdown{
width: 120px;
}
}

或者，如果使用BEM之类的东西，我甚至可以将主类名作为变量并进行更改：

.dropdown{
&__container{
width: 100px;
}
}
//custom
.other-dropdown{
&__container{
width: 120px;
}
}

最好的方法是什么？还有其他方法吗？

Answer 1

使您的组件可重用。你只需为修改后的状态或上下文添加样式，如深色、浅色、大、小**等。

.dropdown{
&__container{
width: 100px;
}
}
//custom
.dropdown{

&.dark {
color: dark;
}


&.light {
color: white;
}

}

到目前为止，这是所有组件的工作。

你有：

--dropdown
--dropdown__container
--container-small
--container-big