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

Question

I've been using material-components-web.min.css to style a Flask app in an MDC web manner. I could go through and edit the colors that I want by hand, but is there a simple method and framework that would allow me to define my own color palette, and then build a material-components-web.min.css with that?

Answer 1

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

CSS 自定义属性

: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 文件包含所有将覆盖默认调色板的规则。确保在您的 HTML 中链接此 CSS 文件。

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

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