时间戳

首页 > 解决方案 > 如何在 Google 的 Material Design 中更改顶部应用栏的填充颜色？

html - 如何在 Google 的 Material Design 中更改顶部应用栏的填充颜色？

问题描述

我正在使用 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 来编辑它并更改颜色？

标签： htmlsassmaterial-design

解决方案

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

有关将 scss 编译为 css 的信息，请阅读快速入门指南。这使得使用 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' },
        ]
      }
    ]
  },
}];

推荐阅读