Material.io 组件的自定义类名答案

【问题标题】：Custom class names for Material.io componentsMaterial.io 组件的自定义类名
【发布时间】：2020-04-30 01:58:02
【问题描述】：

我正在为一个 Web 项目实施 Material.io，并希望使 Material.io 使用的类名与项目更相关。目前，“mdc-”是每个类的前置，我希望将其作为项目的更多定制。 （下面添加了一个简单的代码比较）。

采用 Material.io 的默认输出：

<button class="mdc-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Button</span>
</button>

并自定义块元素类名如下： （以公司为例，将使用所需的公司名称或缩写代替）

<button class="company-button">
  <div class="company-button__ripple"></div>
  <span class="company-button__label">Button</span>
</button>

有人试过吗？我正在努力寻找解决方法，这很可能表明这是一个坏主意。

【问题讨论】：

欢迎来到 SO！编辑当前主题样式或制作类似它们的类是一种不好的方法，使用您自己的具有简单和语义语法的类很好...在上面您可以使用company-button，其余样式您可以像@ 987654324@ 或.mdc-button.company-button .mdc-button__ripple。记住主题默认类。
谢谢@Awais 我意识到了解决方法并在下面发布了我的答案！感谢您的帮助！
是的，这就是我所说的很高兴你帮助自己干杯

【解决方案1】：

过度思考的经典案例，我通过简单的扩展解决了我的问题。

请看下面的例子：

@import "@material/chips/mdc-chips";

.company-chips {
  @extend .mdc-chips;
}

【讨论】：