gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 00:04:21 27 4
gpt4 key购买 nike

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

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com