Question

如何在不使用here的情况下不使用SASS mixins的情况下更改MDC按钮的容器颜色。指定要做的实际等效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>

Answer 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或其他伪类，但是在这种情况下，这是最简单，最合适的方法}

Answer 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

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

2 个答案: