无法将样式应用于 Ionic 单选按钮

Question

我正在尝试将 Ionic 单选按钮的图标向上移动几个像素，但我无法这样做。

下面是代码供参考：

// HTML
<ion-radio class="radio-input" mode="md" slot="start" [value]="data"></ion-radio>

// SCSS
.radio-input {
  // this contains things irrelevant to the question
}

似乎影响我需要的按钮部分的类是.radio-icon，但我无法在组件的样式表上影响它。定位 .radio-input 类没有任何作用，因为它会影响整个事物，而不仅仅是按钮。

隐藏元素并使用“假”单选输入不是一种选择。

这里的正确方法是什么？

编辑：项目在 Ionic 6 上运行。

Answer 1

Ionic 组件使用shadow DOM，这意味着您不能像原生 HTML 一样直接在它们上应用样式或 CSS 类 元素。

为此，请回到他们的docs 关于这部分，我会问：

要对 Shadow DOM 组件的内部元素进行外部样式设置，您必须使用 CSS Custom Properties 或 CSS Shadow Parts。

你需要考虑到这一点，我现在不知道你到底想做什么，但是例如：

ion-radio 有两个部分可以更新，mark 和 container，您可以通过以下方式更改它们的样式：

ion-radio::part(mark) {
    margin-bottom: 10px;
}