Ionic4 如何更改离子4中离子选择的默认样式（.select placeholder、.select icon..etc.shadow root下的元素）

我是爱奥尼亚的新手。我被ion select样式卡住了，如何更改ion 4中ion select的默认样式？我无法通过覆盖CSS来更改它

像这样

.select-placeholder {
    color: black;
    opacity: 1;
}

这是你怎么做的

window.customElements.whenDefined("ion-select").then(() => {
    let selectPlaceholder = document.querySelector("ion-select").shadowRoot.querySelector(".select-placeholder");
    selectPlaceholder.style.setProperty("color", "black");
    selectPlaceholder.style.setProperty("opacity", "1");
});

---

这是一种非正统的方法，但在编译后更改js文件对我很有用： \node_modules\@ionic\core\dist\esm\es5\build\j241fzpw.entry.js

选择占位符{颜色：currentColor；不透明度：0.33}

为了

选择占位符{颜色：currentColor；不透明度：1}

我不确定，但可能有问题的文件可能会有所不同

您可以尝试以下方法：

.select-ios .select-placeholder{
    color: #000;
    font-size: 15px;
  }

---

查看Html，您将发现ion select的一部分，然后css将跟随该部分

---

ionic 4组件只能通过它们提供的css变量来设置样式。@SurajRao yes，但对于阴影根元素，如ionic select下的.select placeholder，我没有找到任何CSS变量来设置不透明度，也无法调整向下箭头按钮。例如：This.select text是一个阴影根元素，没有CSS变量。select text{-ms flex:1；flex:1；最小宽度：16px；字体大小：inherit；text overflow:省略号；空格：nowrap；overflow:hidden；}除非爱奥尼亚开发人员使用CSS 4变量来设置样式，否则您不能使用它。。。你们可能想在网上阅读components@SurajRao：好的，谢谢！由于许多原因，修改node_模块的内容不是一个可靠的解决方案。这不是一个健壮的解决方案，因为它只能在本地工作，并且在运行npm安装时会重写。此外，团队成员将无法访问此功能，除非您创建了一个fork，这对于这样的更改来说并不理想。我应该将其注入到哪里？当我将它添加到组件的.ts文件中时，它会断开。@riotgear尝试附加窗口。在自定义元素之前。我已经用它更新了答案。

ion-select::part(placeholder) {
    color: blue;
    opacity: 1 !important;
}