variables.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 中设置的任何变量都适用于整个应用程序。