Question

我一直在使用material-components-web.min.css以MDC Web方式设置Flask应用程序的样式。我可以通过手工编辑我想要的颜色，但是有一个简单的方法和框架可以让我定义自己的调色板，然后使用它构建一个material-components-web.min.css吗？ / p>

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

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

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

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

1 个答案: