如何解决Reactjs样式化组件无法正常工作
我有一个样式复选框,我想将checked:false
的背景设置为白色,而checked:true
的背景设置为绿色
但是问题是背景颜色始终保持绿色,我不知道为什么。
我正在使用此复选框组件的react组件运行正常,它只是我无法调整的背景颜色
有什么建议吗?
const CheckBoxContainer = styled.div`
display: inline-block;
vertical-align: middle;
`
const Icon = styled.svg`
fill: none;
stroke: white;
stroke-width: 2px;
`
const HiddenCheckBox = styled.input.attrs({ type: 'checkBox' })`
border: 0;
clip: rect(0 0 0 0);
clippath: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: Nowrap;
width: 1px;
`
const StyledCheckBox = styled.div`
display: inline-block;
width: 16px;
height: 16px;
background: #ffffff;
border-radius: 3px;
transition: all 150ms;
margin-top: 10px;
${HiddenCheckBox}:focus + & {
background: ${({ checked }) => (checked ? '#06ba63' : '#ffffff')};
}
${Icon} {
visibility: ${({ checked }) => (checked ? 'visible' : 'hidden')};
}
`
const CheckBox = ({ className,checked,...props }) => (
<CheckBoxContainer className={className}>
<HiddenCheckBox checked={checked} {...props} />
<StyledCheckBox checked={checked}>
<Icon viewBox="0 0 24 24">
<polyline points="20 6 9 17 4 12" />
</Icon>
</StyledCheckBox>
</CheckBoxContainer>
)
export default CheckBox
解决方法
您应检查复选框中的checked
而不是focus
:
${HiddenCheckbox}:checked + & {
background: ${({ checked }) => (checked ? '#06ba63' : '#ffffff')};
}
,
如果Hidden
和Styled
复选框都从checked
获得相同的值,则只需要使用传递给checked
的{{1}}的值(就像您使用Icon一样):
StyledCheckbox
另一种选择是仅在通过CSS选择器选中const StyledCheckbox = styled.div`
display: inline-block;
width: 16px;
height: 16px;
background: #ffffff;
border-radius: 3px;
transition: all 150ms;
margin-top: 10px;
background: ${({ checked }) => (checked ? '#06ba63' : '#ffffff')};
${Icon} {
visibility: ${({ checked }) => (checked ? 'visible' : 'hidden')};
}
`
时应用样式:
HiddenCheckbox
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。