如何设置 Ionic <ion-select> 组件的占位符文本的样式？

Question

如何在 Ionic 框架中为 <ion-select> 组件的 default/placeholder 文本设置样式？默认文本在影子根内，因此 HTML 元素有一个 class 的“select-placeholder” 它不能通过传统的 CSS.[=16 访问=]

框架。com/docs/api/select#css-自定义属性

ion-select 的文档提到使用自定义属性，但只有两个自定义属性：

--placeholder-color

--placeholder-opacity

两者都可以很好地更新颜色和不透明度，但我真的很想专门更新字体粗细和字体样式，并且没有这些的自定义属性。

Ionic team mentions 如果没有自定义属性，“访问元素的影子根并在 JS 中自己应用样式”。但是他们没有详细说明如何做到这一点。

具体来说，如何在未提供自定义属性的 Ionic 组件的影子根中添加样式？

Answer 1

尝试在您的 app.scss 文件中添加以下行：

::ng-deep {
  .select-text {
    color: white;
    ...
  }
}

Answer 2

TLDR；将 part 属性添加到阴影 dom 内的占位符元素，然后在 css.

中使用 ::part(thePartName) 设置样式

这是我的解决方案（我不喜欢它）。顺便说一句，我在使用 Ionic 4。

所以最终，某些离子组件的阴影 DOM 内的样式元素的问题是传统的 CSS select 或来自外部*样式样式表对阴影内的元素 dom。这是阴影 DOM 的要点之一：创建 CSS 不泄漏也不泄漏的封装组件。我知道有两个例外：

1 - 使用 Ionic 的 CSS variables (aka CSS Custom Properties). These are limited to --placeholder-color in Ionic 4 and adding --placeholder-opacity in ionic 5 之一。我碰巧在 ionic 4 上，所以我无法利用不透明度变量。但是，要使用这些自定义属性，您可以这样做：

ion-select {
 --placeholder-color: 'hotpink';
}

我需要设置字体粗细、字体样式和不透明度的样式，因此我需要 CSS 自定义属性以外的其他解决方案。

html 生活在 Ionic 提供的阴影 dom 中：

<div part="SorryIonicDoesntAddThisAttribute" class="select-text select-placeholder>my text</div>

你的css：

::part(thePartName) {
  opacity: 1;
  font-style: italic;
  font-weight: normal;
}

如果“部分”HTML 属性存在于阴影内的元素上 dom 它就像进入阴影的入口 dom。

但是在 Ionic 4 中，Ionic 不会将 part 属性添加到阴影 dom 中的 ion-select 组件的元素。

我使用 javascript 添加它（灵感来自@ivanreutkers 评论）以添加 part 属性，因此我可以在 CSS.

中设置样式

document.getElementById("the-id").shadowRoot.querySelector(".select-placeholder").setAttribute("part", "myPartName");

*外部，表示我的 website/application 的样式表，而不是 Ionic 提供的位于 Web 组件内部的特定样式。

How to style the placeholder text of an Ionic <ion-select> component?