React样式化的组件子道具选择器

是否可以在样式化组件中为子组件prop选择器?

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

我想访问道具是这样的:

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

是否可以,如果可以,我应该怎么做?

评论
  • He猪
    He猪 回复

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

    参见示例:

    const Checkbox = styled.div``;
    const Text = styled.div``;
    
    const Accordion = styled.div`
      & > ${Checkbox}[data-checked="true"] ~ ${Text} {
        color: palevioletred;
        font-weight: 600;
      }
      & > ${Text}[title="example"]{
        border: 1px solid black;
      }
    `;
    
    const App = () => {
      return (
        <Accordion>
          <Checkbox data-checked="true" checked="true">
            I'm Check box
          </Checkbox>
          <Text title="example">With attr</Text>
          <Text>Without attr</Text>
        </Accordion>
      );
    };
    

    Edit quiet-tree-lnukc