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

标签 html css css-selectors material-design

如何在不使用 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>

最佳答案

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

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

.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或其他伪类,但在这种情况下它是最简单最合适的方式

关于html - 更改 MDC 按钮的容器填充颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51684345/

相关文章:

javascript - 纯js如何给内联样式添加像素

CSS:不覆盖但重置为 "normal"

excel - 尝试使用 Selenium + Excel VBA 从 Chrome 浏览器中的网站抓取代码

适合表格内的 HTML 表格

javascript - 使用 jQuery 在框架中获取嵌入 ID

jquery - 是否可以在没有图像或表格的情况下在 CSS 中创建类似网格的背景?

jquery - 即使使用示例代码,mmenu 也不起作用

javascript - 动态 td 阻塞 tr 元素

javascript - 获取列的高度和宽度并在调整大小时更新

java - 单击部分标记内的元素