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>

我应该怎么做？

Answer 1

试试这个： 我已经让它工作了，改变了 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 */
    }

Answer 2

我想，这就够了：

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

根据需要选择量表中的数字。

Answer 3

请在您的项目中不要使用ViewEncapsulation.None。将来它将导致不可预测的行为。当您更改一个组件内的样式时，其他一些组件也可以更改，并且很难找到哪些组件。

如果您想覆盖角材质的样式，我建议在您的项目中创建一个单独的 *.scss，名称类似于 "material-overrides.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 docs。

请不要忘记将您创建的material-overrides.scss 文件添加到styles.scss，如下所示：

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

您还可以阅读 Angular Material 团队的替代建议 - link。

Answer 4

试试这个，

默认半径为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 添加到全局样式表中。但更优雅的方法是上面那个