使用样式化组件，如何根据具有 aria-current 页面或特定类名的子级来设置父级样式？

尝试为孩子设计父 div 的样式Link if the Link已应用aria-current="page" or an active班级名称。

代码（删除）：

<NavBody>
  {items.map((subItem, key) => {
    const { title, link } = subItem
    return (
      <NavLinkContainer key={key}>
        <NavLink
          onClick={closeMobileMenu}
          to={`/docs${link}`}
          activeClassName="active"
        >
          {title}
        </NavLink>
      </NavLinkContainer>
    )
  })}
</NavBody>

样式组件：

const NavBody = styled(Accordion.Body)`
  margin-left: ${({ theme }) => theme.spacings.small};
  padding: 0 !important;
`

const NavLinkContainer = styled.div`
  padding-top: ${({ theme }) => theme.spacings.xSmall};
  padding-bottom: ${({ theme }) => theme.spacings.xSmall};
  border-left: 1px solid ${({ theme }) => theme.colors.color7};
  padding-left: ${({ theme }) => theme.spacings.small} !important;
`

const NavLink = styled(Link)`
  color: ${({ theme }) => theme.colors.color3};
  text-decoration: none;
  padding-bottom: ${({ theme }) => theme.spacings.xxSmall};

  &.active {
    color: ${({ theme }) => theme.colors.color1};
  }

  &:hover {
    color: inherit;
    opacity: 0.7;
    text-decoration: none;
    border-bottom: 1px solid ${({ theme }) => theme.colors.color1};
  }
`

I tried:

const NavLinkContainer = styled.div`
  padding-top: ${({ theme }) => theme.spacings.xSmall};
  padding-bottom: ${({ theme }) => theme.spacings.xSmall};
  border-left: 1px solid ${({ theme }) => theme.colors.color7};
  padding-left: ${({ theme }) => theme.spacings.small} !important;

  &.active {
    border-left: 1px solid ${({ theme }) => theme.colors.color1};
  }
`

但这是错误的应用，因为padding-left。另一种尝试：

<NavBody>
  {items.map((subItem, key) => {
    const { title, link } = subItem
    return (
      <NavLinkContainer key={key} activeClassName="active">
        <NavLink
          onClick={closeMobileMenu}
          to={`/docs${link}`}
          activeClassName="active"
        >
          {title}
        </NavLink>
      </NavLinkContainer>
    )
  })}
</NavBody>

所应用的activeClassName不渲染在div and:

const NavLinkContainer = styled.div`
  padding-top: ${({ theme }) => theme.spacings.xSmall};
  padding-bottom: ${({ theme }) => theme.spacings.xSmall};
  border-left: 1px solid ${({ theme }) => theme.colors.color7};
  padding-left: ${({ theme }) => theme.spacings.small} !important;

  &[aria-current='page'] {
    border-left: 3px solid ${({ theme }) => theme.colors.color1} !important;
  }
`

不渲染颜色。

Research

• 样式化组件：如何针对直系儿童？ https://stackoverflow.com/questions/58690167/styled-components-how-to-target-direct-children
• Styled-Components：指定父母悬停时孩子的样式 https://stackoverflow.com/questions/45036382/styled-components-specify-styles-of-children-on-parents-hover
• 如何向样式组件添加 aria 属性？ https://stackoverflow.com/questions/48083705/how-to-add-an-aria-attribute-to-a-styled-component
• 使用 Material UI 的 makeStyle 设置组件的 [aria-checked="true"] 样式 https://stackoverflow.com/questions/62271948/style-a-components-aria-checked-true-using-material-uis-makestyle
• 样式化组件不适用于层次结构选择器 https://stackoverflow.com/questions/57232729/styled-component-doesnt-work-with-hierachy-selectors

在样式化组件中，有一种方法可以根据子级是否具有 className 来设置父级的样式active or aria-current="page"?

我想出了如何修改我的父母NavLinkContainer。在 Reach Router 中我可以访问pathname from useLocation https://reach.tech/router/api/useLocation:

const { pathname } = useLocation()

using link从我的地图和useMemo https://reactjs.org/docs/hooks-reference.html#usememo我能够找到是否link通过设置变量而存在：

const active = useMemo(() => {
    return pathname.toString().includes(link)
  }, [pathname, link])

通过这样做，我可以将布尔值传递给NavLinkContainer:

<NavLinkContainer border={active}>
  // Further code
</NavLinkContainer>

在样式组件中我可以这样做：

const NavLinkContainer = styled.div`
  border-color: ${({ border, theme }) =>
    border ? `${theme.colors.color1}` : `${theme.colors.color5}`};
`

这使我能够设计父母的风格div在我的主题中设置自定义边框颜色。