CODEWITHSUNDEEP
cssreactjsstyled-components
Nika Roffy
Nika Roffy

Reputation: 941

Reactjs Styled-components not working properly

I have a styled checkbox and I want to set its background to white when checked:false and to green when checked:true

But the problem is background color is always staying green and i dont know why.

The react component in which I'm using this checkbox component is acting right,Its just background color that i cant adjust

Any suggestions please?

    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

Upvotes: 1

Views: 1225

Answers (2)

Ori Drori
Ori Drori

Reputation: 191936

If both Hidden and Styled checkboxes are get the same value from checked, you only need to use the value of checked passed to StyledCheckbox (like you do with Icon):

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

The other option is only to apply the style if HiddenCheckbox is checked via CSS selectors:

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

Upvotes: 0

Taki
Taki

Reputation: 17654

you should check for checked instead of focus of the checkbox :

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

Upvotes: 1

Related Questions