无法使用我的css属性覆盖角度材质主题

3 回答

• 0

  请查看此minimal example（我必须调整font-family才能使此示例正常工作） .

  您正在覆盖一些字体样式定义 . 可以像下面调整的 .Arabic 定义一样单独定义你的font-family，-size和-weight：

  .Arabic {
    font-family: 'Shadows Into Light', cursive;
    margin: 0;
    /* background: #fff; */
    font-size: 16px/20px;
    font-weight: normal;
    color: red;
    text-shadow: 0 0 0 #1072BA;
  }
  

  或者使用速记声明设置字体属性，如在此修改示例中：

  .English{
    margin: 0;
    /* background: #fff; */
    font: normal 16px/20px 'Pacifico', cursive;
    color: green;
    text-shadow: 0 0 0 #0078be;
  }
  

  编辑

  要回答您的评论/编辑问题：

  我在计算值中找到了字体，但它被删除而未应用，只有在我专门在mat-form字段上应用该类时才会应用它

  如果要更改它，则必须在 .mat-form-field 上明确应用该类，因为在prebuilt-themes / indigo-pink.css中它明确定义为

  .mat-form-field{
      font-size:inherit;
      font-weight:400;
      line-height:1.125;
      font-family:Roboto, "Helvetica Neue",sans-serif
  }
  

  标签颜色相同 .

  使用CSS，您必须至少与现有的样式定义一样具体 .

  你可以这样做：

  .Arabic .mat-form-field,.mat-form-field-appearance-legacy .mat-form-field-label,
  .mat-input-element,.mat-form-field.mat-focused .mat-form-field-label{
    font-family: 'Shadows Into Light', cursive;
    margin: 0;
    /* background: #fff; */
    font-size: 16px/20px;
    font-weight: normal;
    color: red;
    text-shadow: 0 0 0 #1072BA;
  }
  .Arabic .mat-form-field.mat-focused .mat-form-field-ripple{
    background-color: red
  }
  

  但我觉得这不是很好 . 更好的解决方案是创建两个custom theme，每种语言一个，并在那里设置颜色和字体 . 这样，您的颜色和字体定义将自动应用于嵌套元素 . This guide是关于自定义主题的好读物 .

  编辑2：角度材料主题

  正如我之前的编辑中所提到的，创建自定义主题可能是解决问题的更好方法 . 角度材质中的自定义主题功能非常强大，但您需要先设置一下 . 之后，调整颜色，字体等只需几行 .

  我已经创建了一个new stackblitz，您可以在其中查看默认设置和两个自定义主题的设置以及材质表单字段的颜色和字体的调整 . 我也在这里简要解释一下：

  styles.scss 的一般结构应该是：

  • 导入所需的角度材料mixins

  • 定义字体

  • 定义/导入自定义组件主题

  • 定义默认主题

  • 定义所有其他自定义主题

  导入 @import '~@angular/material/theming'; 后，您可以开始调整字体（如果您愿意） . 要做到这一点，你只需要定义一个新的 mat-typography-config 例如：

  $arabic-typography: mat-typography-config(
    $font-family: '"Shadows Into Light", cursive'
  );
  
  $english-typography: mat-typography-config(
    $font-family: '"Pacifico", cursive'
  );
  

  要将这些字体配置应用到 mat-core -mixin，需要处理其余部分： @include mat-core($english-typography); . 现在，如果您只想将font-config应用于特定的自定义主题，则必须在主题定义中添加font-config .

  主题由以下结构定义：使用mat-light-theme-mixin为主题定义所需的主要颜色 . 要应用主题，请使用 @include angular-material-theme(<theme name>);

  $app-primary: mat-palette($mat-indigo);
  $app-accent:  mat-palette($mat-amber, A200, A100, A400);
  $app-warn:    mat-palette($mat-red);
  $app-theme:   mat-light-theme($app-primary, $app-accent, $app-warn);
  @include angular-material-theme($app-theme);
  

  要实现多主题设置，可以将主题定义包装在CSS类名称中，如下所示：

  .Arabic {
      $arabic-primary: mat-palette($mat-orange);
      $arabic-accent:  mat-palette($mat-blue, A200, A100, A400);
      $arabic-warn:    mat-palette($mat-red);
      $arabic-theme:   mat-light-theme($arabic-primary, $arabic-accent, $arabic-warn);
      @include mat-core($arabic-typography);
      @include angular-material-theme($arabic-theme);
  }
  

  现在，仅当您的html元素是具有 .Arabic 类的元素的后代时，才会应用 .Arabic 主题 . 另外我添加了 @include mat-core($arabic-typography); ，它告诉主题引擎只需将 $arabic-typography 应用于 $arabic-theme .

  完成样式的最后一步是定义一个自定义组件主题，根据需要对mat-form-fields进行样式设置 . 现在只需几行：

  @mixin my-custom-component($theme) {
    // retrieve variables from current theme 
    $primary: map-get($theme, primary);
  
    // style element
    mat-form-field, .mat-form-field-appearance-legacy .mat-form-field-label {
      color: mat-color($primary);
    }
  }
  

  然后是这个自定义组件主题通过在每个主题定义中添加 @include custom-components-theme(<theme name>); 行来添加到您的自定义主题 . （custom-components-theme是一个小帮手函数 . 在stackblitz中阅读更多关于它的信息） .

  而已 . 如果您需要调整更多组件，则只需为该组件创建自定义主题并将其添加到custom-components-theme mixin .

  回复于 2024-04-29T05:24:48+08:00
• 1

  如果您尝试覆盖Angular Material样式，可以使用 deep

  它面前的参数如下：

  /deep/ .mat-step-header .mat-step-icon {
    background-color: #f6871f;
  }
  

  回复于 2024-04-29T05:24:48+08:00
• 1

  通常当我使用Material样式库时，它们的样式具有很高的特异性 . 如果您检查浏览器中的元素，您将看到应用样式的顺序 . 就像这里一样，你会看到一些属性被覆盖，因为上面有更多的指定属性 .

  

  查看您的样式是否在优先级队列中太远了 . 如果它们根本不存在，那么导入就会出现问题 .

  回复于 2024-04-29T05:24:48+08:00