javascript - 在 React 中动态设置文本区域的 PlaceHolder 颜色

Question

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

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

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

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

我试过这样做

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 }} 一个大括号是 react prop 值，一个是里面的 JS 对象。