Изменить размер MatRadioButton - проблема ряби

Question

Я хочу изменить размер мат-радио-кнопки в моем угловом приложении.Я определил стиль в глобальном масштабе.По большей части это работает, но эффект произвольности рипов не изменяется и если обрезается по границам мат-радио-контейнера.

.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-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%;
}