Angular material 角材质中的造型垫单选按钮

我刚刚开始在我的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>

选择1
选择2

我该怎么做呢？

试试这个

默认半径为

20px

我们在这里将其设置为

10px

：主机：：ng deep.mat无线电容器{
高度：10px；
宽度：10px；
}
：主机：：ng deep.mat无线电外圈{
高度：10px；
宽度：10px；
}
：主机：：ng deep.mat无线电内圈{
高度：10px；
宽度：10px；
}
：主机：：ng deep.mat单选按钮。mat单选波纹{
高度：20px；/*所需圆半径的两倍*/
宽度：20px；/*所需圆半径的两倍*/
左：计算（50%-10px）；/*'10px'-与所需的圆半径相同*/
顶部：计算（50%-10px）；/*'10px'-与所需的圆半径相同*/
}

不使用

：ng deep

关闭使用自定义收音机的组件的封装

你可以这样做

从'@angular/core'导入{Component，ViewEncapsulation}；
@组成部分({
选择器：“示例”，
templateUrl:'example.component.html'，
样式URL:['example.component.css']，
封装：视图封装。无，
})
导出类ExampleComponent{}

在自定义类中包装要设置样式的组件。这样它就不会影响任何其他无线电组件。 在上面的问题中，它已经用

smallRadio

类包装好了

.smallRadio.mat无线电容器{
高度：10px；
宽度：10px；
}
.smallRadio.mat无线电外圈{
高度：10px；
宽度：10px；
}
.smallRadio.mat收音机内圈{
高度：10px；
宽度：10px；
}
.smallRadio.mat单选按钮.mat单选波纹{
高度：20px；
宽度：20px；
左：计算（50%-10px）；
顶部：calc（50%-10px）；
}

---

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

请不要在项目中使用

视图封装。将来它将导致不可预测的行为。当您在一个组件内更改样式时，其他一些组件也可以更改，并且很难找到哪些组件

如果要覆盖角度材质的样式，我建议在项目中创建一个单独的*.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; 
    }
}

请注意
！重要信息
在我的示例中。这也不是一个好的做法。您需要用更精确的指定替换它

另外，请不要忘记将您创建的
材料覆盖.scss
文件添加到
样式.scss
中，如下所示：

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

您还可以阅读angular material团队的覆盖建议-。
我认为，这应该足够了：

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

根据您的需要选择刻度中的数字。
试试这个：
我有一个勾号，改变css

：主机：：ng deep.mat无线电外圈{
边界半径：2px；
}
：主机：：ng deep.mat无线电内圈{
边界半径：2px；
背景色：透明！重要；
边框底部：4倍纯白；
右边框：4倍纯白；
高度：30px；
宽度：15px；
利润上限：-8px；
左边距：3倍；
}
：主机：：ng深。mat收音机已检查。mat收音机外圈{
背景：#ff4081！重要；
}
：主机：：ng深。mat收音机已检查。mat收音机内圈{
变换：旋转（45度）比例（0.5）；
}
：主机：：ng deep.mat单选按钮。mat单选波纹{
高度：20px；/*所需圆半径的两倍*/
宽度：20px；/*所需圆半径的两倍*/
左：计算（50%-10px）；/*'10px'-与所需的圆半径相同*/
顶部：计算（50%-10px）；/*'10px'-与所需的圆半径相同*/
}
我认为：ng deep功能已被弃用，并将在某个时候停止工作，在Angular 8及更高版本中设计按钮的正确方式是什么？您好@chrisinmtown。我已经更新了答案。查看更多信息。因为我们可以直接在mat单选按钮元素上应用css属性；）