为同一个组件编写不同的 css 或 scss 的最佳方法是什么？ [关闭]

Question

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

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

我们也可以只用scss，覆盖样式的方法有很多：

.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