在Angular Material中如何设置mat-radio-button的样式

Question

我刚刚开始在我的Angular应用程序中使用Angular Material主题。

我使用了一些单选按钮，但希望将它们样式化，使它们比通常的更小。我可以样式化文本标签，但是我很难样式化实际的按钮本身（圆形）。

所以现在，我有：

<mat-radio-group class="smallRadio">
    <mat-radio-button value="1">Option 1</mat-radio-button>
    <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

我该如何着手处理这件事情？

- BENBUN Coder

Answer 1

试试这个，

默认半径是20px，我们在这里将其设置为10px

    :host ::ng-deep .mat-radio-container{
      height: 10px;
      width: 10px;
    }
    :host ::ng-deep .mat-radio-outer-circle{
      height: 10px;
      width: 10px;
    }
    :host ::ng-deep .mat-radio-inner-circle{
      height: 10px;
      width: 10px;
    }
    :host ::ng-deep .mat-radio-button .mat-radio-ripple{
      height: 20px; /*double of your required circle radius*/
      width: 20px;  /*double of your required circle radius*/
      left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
      top: calc(50% - 10px); /*'10px'-same as your required circle radius*/
    }

不使用 ::ng-deep

关闭你使用自定义单选框的组件内的封装。

你可以通过以下方式实现：

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

将您想要样式化的组件包装在自定义类中。这样它就不会影响任何其他单选按钮组件。 在上面的问题中，它已经使用 smallRadio 类进行了包装。

.smallRadio .mat-radio-container{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-outer-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-inner-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-button .mat-radio-ripple{
    height: 20px; 
    width: 20px; 
    left: calc(50% - 10px); 
    top: calc(50% - 10px); 
}

您可以在全局样式表中添加这些CSS，而无需关闭视图封装。但更优雅的方法是上面的方法。

- Akhi Akl

---

我相信 :ng-deep 功能已经被弃用，并且在某个时候将停止工作，那么在 Angular 8 及更高版本中，样式化按钮的正确方法是什么？ - chrisinmtown

嗨@chrisinmtown，我已经更新了答案。请查看自定义Angular Material组件获取更多信息。 - Akhi Akl

Answer 2

请勿在您的项目中使用ViewEncapsulation.None，因为这在未来可能会导致不可预测的行为。当您更改一个组件内的样式时，其他组件也可能被更改，并且很难找到哪些组件被更改了。

如果您想要覆盖Angular Material的样式，我建议在项目中创建一个名为"material-overrides.scss"的单独的*.scss文件，其中您可以对不同组件进行所有样式更改。例如，您的文件可能看起来像这样

example-component {
    .smallRadio .mat-radio-container{
      height: 10px !important;
      width: 10px !important;
    }
    .smallRadio .mat-radio-outer-circle{
        height: 10px !important;
        width: 10px !important;
    }
    .smallRadio .mat-radio-inner-circle{
        height: 10px !important;
        width: 10px !important;
    }
    .smallRadio .mat-radio-button .mat-radio-ripple{
        height: 20px !important; 
        width: 20px !important; 
        left: calc(50% - 10px) !important; 
        top: calc(50% - 10px) !important; 
    }
}

请注意我的示例中的 !important，它也不是一个好习惯。您需要用更精确的特定性 MDN Web 文档 替换它。

请不要忘记像这样将您创建的 material-overrides.scss 文件添加到 styles.scss 中：

@import './material-overrides.scss';

你还可以阅读来自Angular Material团队的覆盖建议 - 链接。

- Sergey_T

Answer 3

我认为，这应该够了：

.mat-radio-container {
    transform: scale(0.85);
}

根据您的需求选择刻度上的数字。

- dominik

---

我们可以直接在mat-radio-button元素上应用CSS属性 ;) - Smaillns

我发现的问题是，当点击时，涟漪效果仍然是原始大小，因此看起来与新缩放的.mat-radio-container不匹配。 - R Brill

Answer 4

尝试这样做： 我已经用一个勾号使其正常工作，并更改了CSS。

    :host ::ng-deep .mat-radio-outer-circle{
      border-radius:2px;
    }
    :host ::ng-deep .mat-radio-inner-circle{
        border-radius:2px;
        background-color: transparent!important;
        border-bottom: 4px solid white;
        border-right:4px solid white;
        height:30px;  
        width:15px;
        margin-top: -8px;
       margin-left: 3px;
    }
    :host ::ng-deep .mat-radio-checked .mat-radio-outer-circle{
       background:#ff4081!important;
    }
    :host ::ng-deep .mat-radio-checked .mat-radio-inner-circle{
       transform: rotate(45deg) scale(0.5);
    }
 
    :host ::ng-deep .mat-radio-button .mat-radio-ripple{
      height: 20px; /*double of your required circle radius*/
      width: 20px;  /*double of your required circle radius*/
      left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
      top: calc(50% - 10px); /*'10px'-same as your required circle radius */
    }

- stannars jose