使用样式化的组件根据值对输入进行样式化

问题描述 投票:0回答:1

我正在使用styled-components设置React Bootstrap Form.control元素的样式。

我正在尝试确定是否可以根据输入是否具有值来设置输入的样式。例如,没有值(仅占位符),我希望输入为灰色。如果该字段具有值,则应为白色。

我已经尝试了以下几种方法,但无济于事:

background: ${props =>
    props.value ? 'white' : `${props.theme.colors.greys.athens}`};

我也尝试过::placeholder样式。问题是它只会对输入字段的内部占位符部分进行样式设置,因此字段的整个背景不是正确的背景色。

reactjs react-bootstrap styled-components
1个回答
0
投票

您应确保对此值有一个状态,在父包装中,应访问此状态以使该父具有正确的背景色。

© www.soinside.com 2019 - 2024. All rights reserved.