如何将所有具体化 .btn、.btn-large 和 .btn-small 的颜色更改为 .pink、.accent-1？答案

【问题标题】：How do I change the color of all of the materialize .btn, .btn-large, and .btn-small to .pink,.accent-1?如何将所有具体化 .btn、.btn-large 和 .btn-small 的颜色更改为 .pink、.accent-1？
【发布时间】：2018-07-19 15:16:22
【问题描述】：

我试过了

    .btn, .btn-large, .btn-small{
        @extend .pink, .accent-1
     }

特异性有问题吗？

【问题讨论】：

标签： sass materialize css-specificity

【解决方案1】：

您可以通过更改 background-color 属性来覆盖默认的 btn 类，例如：

.btn {
   background-color: red;
   color: white;
}

按钮就像

<button class="btn btn-lg">Hello</button>

【讨论】：

【解决方案2】：

我不确定您是否只是在 SASS 中寻找答案，但这里有一个纯 CSS 的解决方案。

从Materialize.css docs 获取pink-accent-1 #ff80ab 的十六进制颜色代码，并将!important 参数应用于按钮的background-colour，以确保覆盖默认的Materialize 类。

.btn , .btn-small, .btn-large{
    background-color: #ff80ab !important;
}

这是一个有效的fiddle。

【讨论】：

我应该澄清一下。 styles.scss 文件（编译成styles.min.scss）读取@import "components/_color-variables.scss"; @import "components/_color-classes.scss"; nav .nav-wrapper{ @extend .pink; } .btn, .btn-large, .btn-small{ background-color: #ff80ab !important; }，按钮不工作，但导航栏工作。
你重新编译过scss文件吗？我刚刚在本地运行了你提供的代码，它工作了。

【解决方案3】：

哦！好像我放错了我的 styles.min.css 文件。对不起，大家。很高兴知道我有这些资源，如果我需要的话。

【讨论】：