问题标签 [angular-material-theming]

我在 _theming.scss 文件中找到

我想将背景和其他组件更改为不同的颜色，例如白色。有谁知道如何配置这些设置或覆盖它们？添加带有白色背景的styles.css 不起作用。编译时这个 _theming.scss 似乎总是覆盖任何其他设置

我在一个公司环境中工作，这使得尝试让 SCSS 在我们的构建服务器上工作变得非常困难。有没有办法使用自定义调色板作为纯 CSS 来应用自定义 Angular Material 2 主题？

想象一下 Angular 组件的 my.component.scss 文件中有一个 SCSS mixin。

现在我在 Angular 应用程序的全局 style.scss 中导入该文件，因为我想将一些数据传递给该 mixin。

例如： my-component.scss。

我的组件.ts

Angular 应用程序的 styles.scss。（这在 Angular.json 中导入）

它确实按预期编译和应用程序工作，但我的“错误消息”css 类可供整个应用程序访问。

Angular 应该封装了“错误消息”css 类，并且它的可见性应该仅限于 my-component。在这种情况下如何保持封装工作？

PS：我只是想完成这个：https ://material.angular.io/guide/theming#theming-only-certain-components但这个问题似乎更普遍。

提前致谢。让我知道是否需要进一步澄清或代码。

我正在尝试修改具有 Angular 6 并且使用 Angular Material 6.3.3 的项目的主题

目前，我只是从 Material 站点复制代码并按照步骤操作，但是当我尝试运行 ng serve 时弹出错误。

我的 theme.scss 文件如下所示：

我试图在我的项目中使用 font awesome css，但 css 没有应用于 HTML 元素。如果我删除Angular Material 主题，那么只有 Font Awesome CSS 正在工作。但是 Angular 材质组件将不起作用！！！

对此的任何指导 -

当我按照在线说明 https://material.angular.io/guide/theming时出现错误

./src/styles.scss 中的错误 (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14 -3!./src/styles.scss) 模块构建失败：@import '~@material/theme'; ^ 找不到或无法读取要导入的文件：~@material/theme。在 D:\Practice\angular\styles.scss （第 1 行，第 1 列）

我不知道为什么它没有找到材料/主题或为什么无法导入，因为我可以在我的 node_modules 文件下看到@material/theme。

In customizing my angular material theme's typography. I understand that one can override the default font with their own font like so:

Although, I noticed that the source code shows two fonts , the default Roboto, and then Helvetica is also included in inverted commas:

Is that a secondary font? I would like if I could choose a secondary font. If this is not a secondary font, what is it?

thanks

设想 ：

• 我有一个应用程序，它喜欢使用 3 个不同的图形主题。
• 为了传播我的主题，我使用了 3 个应用于我的根组件的不同类，
  我们将这些类称为 .themeA、.themeB、.themeC。
  对于每个主题，
  我都有一个 Sass 变量来封装我需要的所有颜色。

例如：

然后在我希望应用我的主题的每个子组件中，我使用以下模式：

问题 ：

• 有没有办法避免或分解在每个子组件中使用:host-context()选择器并尊重组件样式封装？

更新： 谢谢，这有助于简化一些事情。现在我们想找到一种方法来避免在每个子组件中复制这个块：

理想情况下，我们希望将其替换为一个函数调用，该函数调用将采用任何 mixin 参数并应用它。所以在每个组件中，我们只需要使用正确的 mixin 调用这个函数来处理主题。

我一直在尝试为我的网站制作自定义主题，但不会影响背景颜色。这是我的主题：

我mat-app-background身上有，但第一个包含的主题设置为暗/亮，这也是背景颜色的变化，黑色或白色。

起初这是一个问题，但我很好，我现在的问题是它不在乎 alt 主题是浅色的，背景保持黑色。或者，如果第一个包含的主题是浅色的，而 alt 是深色的，它将保持白色。

编辑：

所以我的问题是我正在向我添加mat-drawer-container我猜它不喜欢的类，我将它包装在一个 div 中，然后一切都开始按预期工作

我正在使用有角度的材料，并且在主题化方面有点迷失。我正在使用包含在我的 styles.scss 中的预建靛蓝粉色主题，如下所示

基于文档，我创建了一个名为 theme.scss 的新文件，并将其包含在 style.scss 之后的 angular.json 中。theme.scss 如下所示

我的要求 我只需要将默认字体颜色更改为白色而不是黑色。我根本不需要改变任何东西。我只是从示例中复制了主要和重音调色板。所以感觉即使他们不需要改变。