更改 MDC 按钮的容器填充颜色答案

【问题标题】：Change Container Fill Colour for MDC Button更改 MDC 按钮的容器填充颜色
【发布时间】：2018-08-04 09:40:57
【问题描述】：

如何在不使用 SASS mixins 的情况下更改 MDC 按钮的容器颜色，如 here 所述。指定的实际等效 CSS 是什么？

我尝试了以下方法：

.mdc-button:after,
.mdc-button:before {
  background-color: #000000
}

.mdc-button {
  background-color: #000000;
}


<div class="button-container">
  <button class="mdc-button mdc-button--raised foo">
            Foo
        </button>
  <button class="mdc-button mdc-button--raised bar">
            Bar
        </button>
</div>

完整代码如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="https://material.io/favicon.ico">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
        <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
    </head>
    <body>
    <style>
    .mdc-button:after,
    .mdc-button:before {
            background-color: #000000
    }
    
    .mdc-button {
      background-color: #000000;
    }
    </style>
    <form action="home.html">
    
        <div class="button-container">
    	<button class="mdc-button mdc-button--raised log-in">
                Foo
            </button>
    	<button class="mdc-button mdc-button--raised sign-up">
                Bar
    	</button>
        </div>
    </form>
    
    <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
    
    </body>
    </html>

【问题讨论】：

你可以看到它在这里工作正常..那么问题是什么？
这很奇怪 - 这一定与 Play 框架读取 CSS 的方式有关
肯定会涉及到更多的 CSS，所以你需要检查所有你拥有的代码，而不仅仅是你写的代码
@TemaniAfif 我已经发布了完整的代码。我认为 material-components-web.min.css 中的某些内容与我的自定义 CSS 发生冲突，但我不知道是什么。我以为我的 CSS 会覆盖之前的任何内容。

标签： html css css-selectors material-design

【解决方案1】：

这是一个特殊性问题，您需要增加选择器的特殊性才能覆盖 Material 定义的选择器。

这个是罪魁祸首.mdc-button--raised:not(:disabled)，它的特异性等于2个类的特异性（Points in CSS specificity）所以你至少需要使用3个类¹ 以确保您将覆盖它。

.button-container .mdc-button.mdc-button--raised{
  background-color: #000000;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">

<form action="home.html">

  <div class="button-container">
    <button class="mdc-button mdc-button--raised log-in">
                Foo
            </button>
    <button class="mdc-button mdc-button--raised sign-up">
                Bar
    	</button>
  </div>
</form>

<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

如果您在 CSS 之后包含您的 CSS，您只能使用 2 个类：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
<style>
.button-container .mdc-button{
  background-color: #000000;
}
</style>
<form action="home.html">

  <div class="button-container">
    <button class="mdc-button mdc-button--raised log-in">
                Foo
            </button>
    <button class="mdc-button mdc-button--raised sign-up">
                Bar
    	</button>
  </div>
</form>

<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

^{1：这不是唯一的方式，我们可以使用ID或其他伪类，但在这种情况下它是最简单最合适的方式}

【讨论】：

【解决方案2】：

如果你不想使用 SASS，你可以使用 CSS 变量，比如：

:root {
    --mdc-theme-primary: #ff9900; 
}
.mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) {
    background-color: var(--mdc-theme-primary,#ff9900);
}

或者直接设置background-color属性：

.mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) {
    background-color: #ff9900;
}

要覆盖该属性，您的样式表应该在 MDC 样式表之后。

这里是关于如何使用 SASS 有效地改变颜色的文章：
https://material.io/design/color/applying-color-to-ui.html#buttons-chips-selection-controls

【讨论】：