样式化的组件：如果子项具有属性，则对父项进行样式化

Question

我有一个父级，该子级具有深层嵌套的子级，如果选中该子级，则可以获得属性。

仅当深度嵌套的孩子的属性为“选定”时，如何设置父母的背景颜色？

<Parent>
 <Child>
  <NestedChild selected>

这是我尝试过的：

const Parent = styled.div`
  &[selected] { // But this only styled the child, not the parent}
`;

Answer 1

CSS方式

没有一个-CSS不允许元素影响其父项的样式，仅影响其孩子或兄弟姐妹的样式。

React的纯粹主义方式

将useContext hook与createContext和上下文Provider一起使用，或简单地将回调传递给所有嵌套层。

简单易用的React +香草JavaScript方式

// set up some styles for `has-child-selected` class
// ...

const Parent = ({ ... }) => {
  return <div className="parent">
    ...
  </div>
}

const Child = ({ selected }) => {
  const ref = useRef(null)

  useEffect(() => {
    ref.current.closest('.parent')
      .classList[selected ? 'add' : 'remove']('has-child-selected')
  }, [selected])

  return <div ref={ref}>
    ...
  </div>
}

---

编辑：我意识到我什至没有在这个答案中提到样式化组件，但我认为它不会有太大变化。也许对样式元素有更多了解的人可以启发。

Answer 2

我认为您只能使用CSS做到这一点。所以我至少记得。尝试这个。 您可以更改任何标签和任何属性

li:has(> a[href="https://css-tricks.com"]){
  color:red;
}

看起来目前不起作用。但请查看何时看到此内容。 ：D：D