Reactjs Styled-components 无法正常工作答案

【问题标题】：Reactjs Styled-components not working properlyReactjs Styled-components 无法正常工作
【发布时间】：2020-09-18 19:55:16
【问题描述】：

我有一个样式复选框，我想在checked:false 时将其背景设置为白色，在checked:true 时将其背景设置为绿色

但问题是背景颜色总是保持绿色，我不知道为什么。

我使用这个复选框组件的反应组件是正确的，它只是我无法调整的背景颜色

有什么建议吗？

    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

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

您应该检查复选框的checked 而不是focus：

${HiddenCheckbox}:checked + & {
    background: ${({ checked }) => (checked ? '#06ba63' : '#ffffff')};
  }

【讨论】：

【解决方案2】：

如果Hidden 和Styled 复选框都从checked 获得相同的值，您只需使用传递给StyledCheckbox 的checked 的值（就像使用图标一样）：

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')};
  }
`

另一个选项是仅在通过 CSS 选择器检查 HiddenCheckbox 时应用样式：

const StyledCheckbox = styled.div`
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 3px;
  transition: all 150ms;
  margin-top: 10px;
  
  background: white;
  ${Icon} {
    visibility: hidden;
  }

  ${HiddenCheckbox}:checked + & {
    background: #06ba63;
  }

  ${HiddenCheckbox}:checked + & > ${Icon} {
    visibility: visible;
  }
`

【讨论】：