如何构建自己的 material-components-web.min.css？

Question

我一直在使用 material-components-web.min.css 以 MDC 网络方式设置 Flask 应用程序的样式。我可以手动编辑我想要的颜色，但是有没有一种简单的方法和框架可以让我定义自己的调色板，然后构建一个 material-components-web.min.css用那个？

Answer 1

MDC 可以轻松自定义颜色。您可以通过 Sass 变量或 CSS 自定义属性覆盖默认主题颜色。 CSS 自定义属性启用运行时主题。

CSS Custom Properties

:root {
  --mdc-theme-secondary: #018786;
  --mdc-theme-secondary-light: #02cecc;
  --mdc-theme-secondary-dark: #004040;
  --mdc-theme-background: #fff;
}

SASS

首先用npm

安装@material/theme包

npm install --save @material/theme

然后像这样创建一个 sass 文件来修改调色板：

$mdc-theme-primary: #9c27b0; 
$mdc-theme-secondary: #ffab40;
$mdc-theme-background: #fff;

@import "@material/theme/mdc-theme";

编译sass文件，输出的CSS文件包含所有将覆盖默认调色板的规则。确保 link 这个 CSS 文件在你的 HTML.

文档：https://material.io/components/web/catalog/theme/

如果您有任何其他问题或疑问，请发表评论。

如何构建自己的 material-components-web.min.css？

How do I build my own material-components-web.min.css?

material-design

material-components