调整MatRadioButton的大小-涟漪问题

Question

我想在我的角度应用程序中调整Mat-radio-button的大小。我全局定义了一种样式。在大多数情况下，它是有效的，但是波纹的分配效应不会调整大小，并且如果被垫子-无线电-容器边界限制，则不会被调整。

.mat-radio-container {
    height: 15px !important;
    width: 15px !important;
}
.mat-radio-outer-circle {
    height: 15px !important;
    width: 15px !important;
}
.mat-radio-inner-circle {
    height: 15px !important;
    width: 15px !important;
}
.mat-radio-button .mat-radio-ripple {
    height: 30px !important;
    width: 30px !important;
    left: calc(50% - 15px) !important;
    top: calc(50% - 15px) !important;
}

.mat-radio-ripple-element {
    height: 30px !important;
    width: 30px !important;
}

我也想调整波纹的大小。

Answer 1

将要设置样式的组件包装到自定义类中。

.mat-radio-container {
    height: 15px !important;
    width: 15px !important;
}
.mat-radio-container .mat-radio-outer-circle {
    height: 15px !important;
    width: 15px !important;
}
.mat-radio-container .mat-radio-inner-circle {
    height: 15px !important;
    width: 15px !important;
}
.mat-radio-container .mat-radio-button .mat-radio-ripple {
    height: 30px !important;
    width: 30px !important;
    left: calc(50% - 15px) !important;
    top: calc(50% - 15px) !important;
}

.mat-radio-container .mat-radio-ripple-element {
    height: 30px !important;
    width: 30px !important;
}

Answer 2

执行此操作的一种简单方法是仅使用mat-radio-ripple将border-radius: 50%;更改为一个圆，以免剪切。此属性不需要!important，因为首先不是Angular Material设置它。另外，mat-radio-ripple-element css在这里不执行任何操作，因此我们可以忽略它。

更新的CSS

.mat-radio-container {
    height: 15px !important;
    width: 15px !important;
}

.mat-radio-outer-circle {
    height: 15px !important;
    width: 15px !important;
}

.mat-radio-inner-circle {
    height: 15px !important;
    width: 15px !important;
}

.mat-radio-button .mat-radio-ripple {
    height: 30px !important;
    width: 30px !important;
    left: calc(50% - 15px) !important;
    top: calc(50% - 15px) !important;
    border-radius: 50%;
}