【问题标题】：How do I change the top-app-bar fill color in Google's Material Design?如何在 Google 的 Material Design 中更改顶部应用栏的填充颜色？
【发布时间】：2019-03-26 00:45:31
【问题描述】：

我使用 Google 的 Material Design 作为一个很好的 UI 设计工具来帮助我创建一个用于个人编程体验的网络应用程序。我想知道如何使用 Sass 更改 Top App Bar 颜色。我无法弄清楚文档。

这里是文档的链接：https://material.io/develop/web/components/top-app-bar/

基本上，我想将它更改为任何东西的十六进制颜色。这是我当前的代码：

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Chat App</title>
        <link rel="stylesheet" href="styles.scss" type="text/scss">
        <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    <body>
        <header class="mdc-top-app-bar mdc-top-app-bar--short blue-bar">
            <div class="mdc-top-app-bar__row">
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                    <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
                    <span class="mdc-top-app-bar__title">Title</span>
                </section>
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
                    <a href="#" class="material-icons mdc-top-app-bar__action-item">settings</a>
                    <a href="#" class="material-icons mdc-top-app-bar__action-item">account_circle</a>
                </section>
            </div>
        </header>
        <p>
            Nothing to see here.
        </p>
    </body>
</html>

SCSS 文件

$base-color: #AD141E;
.blue-bar { @include mdc-top-app-bar-fill-color($base-color); }

我将课程命名为 .blue-bar 只是因为我觉得自己很蓝。它不一定是蓝色的。我只是想知道如何更改栏的默认紫色。

编辑：

我刚刚意识到您必须先将 scss 文件转换为 css 才能使用它。我的新问题是：由于我使用的是 Google 的 Material Design CSS，如何使用 Sass 对其进行编辑和更改颜色？

【问题讨论】：

在 Stackblitz 上发布相关代码的工作版本，以便人们清楚地看到问题并采取行动。

标签： html sass material-design

【解决方案1】：

请注意，您的 $base-color 实际上是红色。改用.blue-bar { @include mdc-top-app-bar-fill-color(#0000ff); } 或任何其他蓝色

有关将 scss 编译为 css 的信息，请阅读 Quick start guide。这使得使用 unpkg 变得不必要。基本上你想设置 webpack 将你的 scss 文件捆绑到一个 css 文件中。请注意，在 webpack.config.js 中有 2 个输出路径。

module.exports = [{
  entry: './app.scss',
  output: {
    // This is necessary for webpack to compile
    // But we never use style-bundle.js
    filename: 'style-bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              //This is where you specify the output for your bundled css file.
              //outputPath specifies where the file is stored (i'm doing this from my head so unsure about pathing)
              //Name is the filename.
              outputPath: './css'
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' },
        ]
      }
    ]
  },
}];

【讨论】：

【解决方案2】：

更改 MDC 顶部应用栏填充颜色

@use "@material/top-app-bar"; // namespace top-app-bar contains fill-color mixin
@use "@material/top-app-bar/mdc-top-app-bar"; // contains CSS classes

.mdc-top-app-bar {
  // fill-color($color) is defined in the top-app-bar namespace
  @include top-app-bar.fill-color(#29E);
}

为 Web 编译 MDC

对于那些不构建 nodejs 应用程序或使用打包程序的人...

获取@material来源，例如：

安装 npm
安装 mdc：npm i material-components-web
使用您的 node_modules/@material 副本

使用 dart-sass 将你的 SCSS 编译为 CSS ：

从https://github.com/sass/dart-sass/releases/ 安装 sass 二进制文件
编译你的代码：sass -s compressed -I ../node_modules/input.scss bundle.css

使用 esbuild 编译您的 javascript 代码：

安装二进制文件（其他安装方法（点击展开））：https://github.com/evanw/esbuild
编译 JS：esbuild --bundle --minify input.js --outfile=bundle.js

不幸的是 esbuild 没有提供路径参数，并且 node_modules 目录必须在你的 js 文件父目录中可用。

【讨论】：