在 React 中动态设置文本区域的 PlaceHolder 颜色答案

【问题标题】：Set PlaceHolder color of a textarea dynamically in React在 React 中动态设置文本区域的 PlaceHolder 颜色
【发布时间】：2019-12-22 01:22:04
【问题描述】：

我正在尝试在文本区域内设置占位符的颜色，这是我的动态反应组件，但没有这样做。我将 CSS 用于设置默认颜色的样式，但这些颜色稍后由道具更新。我可以轻松设置背景颜色、颜色等内容，但无法设置嵌套属性或 ::placeholder 等伪选择器。任何帮助表示赞赏。

我尝试使用纯 JS 和其他一些内联样式设置来设置它，但失败了。

<div className="container-textarea">
              <TextAreaWrapper
                placeholder="Write message"
                style={color: props.color }
                />        
        </div>

//在样式道具中，颜色是动态设置的，但我也想动态设置占位符的颜色。

我试过这样做

const styles = {
color : props.color,
'::placeholder' : {
color : props.color
}
}

【问题讨论】：

具体来说，你使用的是什么 css-in-js 包？
@technicallynick，你可以看到他根本没有使用 css-in-js。他使用纯粹的反应。
@jcubic，因为他标记了模棱两可的“样式”，我想看看我是否遗漏了什么。
@technicallynick jcubic 是正确的，我没有在 js 解决方案或第三方库中使用 css。只是将 SCSS 编译为组件使用的纯 CSS。

标签： javascript css reactjs styles

【解决方案1】：

如果您使用样式属性，则只能使用选择器的 css 属性。

style="color: red"

但是有一种方法可以让它动态工作，你需要的是 CSS 变量（真正的规范名称是自定义属性）所以你把这个 CSS 放到你的样式文件中：

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--placeholder-color);
}
::-moz-placeholder { /* Firefox 19+ */
  color: var(--placeholder-color);
}
::placeholder {
  color: var(--placeholder-color);
}

那么你可以使用 React 来添加：

    <div className="container-textarea">
          <TextAreaWrapper
            placeholder="Write message"
            style={'--placeholder-color': props.color }
            />        
    </div>

我也不确定你是否需要{{'--placeholder-color': props.color }} 一个花括号是 react prop 值，一个是里面的 JS 对象。

【讨论】：

感谢您的回答，但我认为这行不通，因为我使用的是 SCSS，而且我相信 CSS 和 SCSS 中的变量表现不同。
@BugggyBug 他们可以一起工作你不要在 SCSS 中使用变量，只在 CSS 中使用变量，它们是专门创建的，所以它们不会相互干扰，这就是为什么 -- 在开头而不是$。