时间戳

首页 > 解决方案 > 样式化组件：如果子级具有属性，则样式化父级

css - 样式化组件：如果子级具有属性，则样式化父级

问题描述

我有一个父级，它有一个深度嵌套的子级，如果选择它可以获取一个属性。

仅当深度嵌套的子项具有“已选择”属性时，如何设置父项的背景颜色？

<Parent>
 <Child>
  <NestedChild selected>

这是我尝试过的：

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

标签： cssreactjsstyled-components

解决方案

CSS方式

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

React 纯粹的方式

将useContext钩子与createContext上下文一起使用Provider，或者简单地将回调向下传递到所有嵌套级别。

hacky 又简单的 React + vanilla 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>
}

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

推荐阅读