React styled component child prop selector

Question

is it possible to make selector for child component prop in styled components?

<Accordion>
   <Checkbox checked='false' />
   <Text>Text to be hidden when checked is false</Text>
</Accordion>

I would like to access the prop something like this:

const Accordion = styled.div`
    & > ${Checkbox}[checked='false'] ~ ${Text} {
        display: none;
    }
`;

Is it possible and if so, how should I do it?

Answer 1

You are trying to use Attribute selectors, so you need to define valid attributes on Checkbox component like data-*.

If you trying to use component's property, you have to lift the state up (see Text with "State from Parent").

const Checkbox = styled.div``;
const Text = styled.div``;

const Accordion = styled.div`
  & > ${Checkbox}[data-checked="true"] ~ ${Text} {
    color: palevioletred;
    font-weight: 600;
    &:last-child {
      color: ${prop => (prop.checked ? `blue` : `orange`)};
    }
  }
  & > ${Text}[title="example"]{
    border: 1px solid black;
  }
`;

const App = () => {
  return (
    <Accordion checked>
      <Checkbox data-checked="true" checked="true">
        I'm Check box
      </Checkbox>
      <Text title="example">With attr gives border</Text>
      <Text>Without attr</Text>
      <Text>State from Parent</Text>
    </Accordion>
  );
};