变量.scss 中的组件变量不起作用

Question

我在"variables.scss"或"global.scss"的文件中编写了下面的代码：

ion-searchbar {
–placeholder-color: white;
–placeholder-opacity:1;
–icon-color:white;
}

它应该使占位符的文本为白色，但是，它不起作用。

但是，如果我只在页面 css 文件中编写代码，它确实有效。

有人知道为什么吗？

Answer 1

你必须把它放在:root伪选择器中，就像这样：

:root {
ion-searchbar {
--placeholder-color: white;
–-placeholder-opacity: 1;
–-icon-color: white;
}
}

这将确保您在 ：root 中设置的任何变量都将应用于整个应用程序。