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