Javascript 反应样式化组件子属性选择器

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

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

有可能吗？如果有，我应该怎么做？

您正在尝试使用，因此您需要在

复选框中定义有效的属性

如果您试图使用组件的属性，则必须提升状态（请参阅带有“来自父级的状态”的
Text
）

const Checkbox=styled.div`；
const Text=styled.div``；
const Accordion=styled.div`
&>${Checkbox}[data checked=“true”]~${Text}{
颜色：淡紫罗兰色；
字号：600；
&：最后一个孩子{
颜色：${prop=>（prop.checked？`blue`:`orange`）}；
}
}
&>${Text}[title=“example”]{
边框：1px纯黑；
}
`;
常量应用=（）=>{
返回(
谢谢！你会推荐哪种方法？我想要提升状态，我需要在Accordion组件之外定义方法，这将使其不可重用，并且每次实现Accordion时我都需要复制该方法，对吗？没有“更好”的方法，状态是动态的，请选择适合您的用例的方法。
const Accordion = styled.div`
    & > ${Checkbox}[checked='false'] ~ ${Text} {
        display: none;
    }
`;

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