无法将样式应用于 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
}

似乎影响我需要的按钮部分的class是.radio-icon，但我无法在组件的样式表上影响它。瞄准 .radio-input class 什么都不做，因为它影响了整个事情，而不仅仅是按钮。

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

这里正确的方法是什么？

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

Answer 1

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

为此，回到他们 docs 关于这部分的内容，我引用：

To externally style internal elements of a Shadow DOM component you must use CSS Custom Properties or CSS Shadow Parts.

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

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

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

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

Can't apply styles to Ionic radio button

css

sass

ionic-framework

angular