在 React 中动态设置文本区域的占位符颜色

Question

我正在尝试在文本区域内设置占位符的颜色，该文本区域是我的动态反应组件，但未能这样做。我正在使用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
}
}

Answer 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 }}一个大括号是反应道具值，一个是里面的 JS 对象。