我正在使用styled-components设置React Bootstrap Form.control元素的样式。
我正在尝试确定是否可以根据输入是否具有值来设置输入的样式。例如,没有值(仅占位符),我希望输入为灰色。如果该字段具有值,则应为白色。
我已经尝试了以下几种方法,但无济于事:
background: ${props =>
props.value ? 'white' : `${props.theme.colors.greys.athens}`};
我也尝试过::placeholder
样式。问题是它只会对输入字段的内部占位符部分进行样式设置,因此字段的整个背景不是正确的背景色。
您应确保对此值有一个状态,在父包装中,应访问此状态以使该父具有正确的背景色。