问如何更改谷歌材料设计中的顶部应用程序栏填充颜色？
EN

Stack Overflow用户

提问于 2019-03-25 16:45:31

回答 2查看 1.7K关注 0票数 1

我正在使用谷歌的材料设计作为一个良好的UI设计工具，以帮助我创建一个个人编程体验的网页应用程序。我想知道我如何可以改变顶部应用程序栏的颜色与Sass。我搞不懂那些文件。

下面是指向文档的链接：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，然后才能使用它。我的新问题是:既然我使用的是谷歌的材料设计CSS，我如何使用Sass来编辑和更改颜色？

html

sass

material-design

边缘安全加速平台EO 1.8折起

边缘节点遍布全球，提供域名解析、动静态智能加速、TCP/UDP 四层加速、DDoS/CC/Web/Bot 防护、边缘函数计算等边缘一体化服务

回答 2

Stack Overflow用户

发布于 2019-03-26 22:52:00

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

有关将scss编译为css的信息，请阅读快速启动指南。这样就没有必要使用unpkg。基本上，您希望设置webpack，将scss文件捆绑到单个css文件中。注意，在webpack.config.js中有两个输出路径。

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' },
        ]
      }
    ]
  },
}];

票数 0

Stack Overflow用户

发布于 2020-07-09 09:16:04

更改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);
}