Styled-Components 的扩展规则不起作用

Question

我正在使用 styled-components 并尝试使用嵌套组件扩展一些规则，但由于某些原因不起作用：

const Header = styled.div`
    ${border
      ? `
      border-top-width: 0px !important;
      border-bottom-width: 0px !important;
      border-left: 8px solid ${Base.AzulBordaCard} !important;`
      : null}
  `;

const Link = styled.a`
    padding: 0.7rem 0.8rem !important;

    &:hover {
      background: ${Base.CinzaFundo} !important;
      border-radius: 50% !important;
    }

    &[aria-expanded='true'] ${Icon} {
      color: ${Base.CinzaMako} !important;
      transform: rotate(180deg) !important;
    }

    // THIS IS NOT WORKING
    &[aria-expanded='true'] ${Header} {
      border-bottom-width: 1px !important;
    }
  `;

Answer 1

如果我说不傻，你就不能把parent变成child。你不能上瀑布。做你想做的，你可以传递一个道具到你的父组件 Header 来处理边框底部。我做了一个带有背景的基本示例来向您展示如何：https://codesandbox.io/s/dreamy-newton-7zxhm。告诉我好不好

Answer 2

您在最后一个块中缺少 color 和 style 作为 border-bottom。

应该是：

  &[aria-expanded='true'] ${Header} {
    border-bottom: 1px solid ${Base.AzulBordaCard} !important;
  }

或者，您可以保持最后一个块不变，只需通过修改 Header 定义来定义四周的默认边框，如下所示：

const Header = styled.div`
  border: 0 solid ${Base.AzulBordaCard} !important;
  border-left-width: 8px !important;
`;

Styled-Components 的扩展规则不起作用

Extended rules from Styled-Components not working

reactjs

styled-components