Search code examples
reactjsantdstyled-components

styled components change style based on class without props

I am using Antd and Styledcomponents in my react project. I have a set of checkboxes and I want to change the style of checked checkboxes. Is there any way I can do this without passing props? just by giving the class name?

const StyledCheckBox = styled(Checkbox)`
 width: 90%;
 padding: 5px 5px 5px 10px;
 border: 1px solid #d5d5d5;
 .ant-checkbox-wrapper-checked{
   background: #bee7ff;
 }`

Tried the above code and it doesn't work. Am I missing something or am I doing it wrong? Can someone explain how to solve this? TIA

Solution

  • The way you've written it the .ant-checkbox-wrapper-checked{} style will be applied to an element inside your StyledCheckBox. If it should be the same element, you should write it like this (notice the &):

    const StyledCheckBox = styled(Checkbox)`
 width: 90%;
 padding: 5px 5px 5px 10px;
 border: 1px solid #d5d5d5;
 &.ant-checkbox-wrapper-checked{
   background: #bee7ff;
 }`