Javascript Material.io组件的自定义类名

我正在为一个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>

按钮

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

按钮

---

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

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

见下例：

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

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

---

欢迎来到SO！编辑当前的主题样式或使类与之类似是一种不好的方法，最好使用您自己的具有简单语义语法的类。。。在上面的例子中，您可以使用

公司按钮

和rest样式，您可以使用它们，例如

公司按钮.mdc-button\uuuRipple

或

.mdc-button.company-button.mdc-button\uuRipple

。记住你的主题默认类。谢谢@Awais，我意识到了这一点，并在下面发布了我的答案！谢谢你的帮助！是的，这就是我要说的很高兴你自己动手干杯

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

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