Question

我正在使用样式组件，并尝试使用嵌套组件扩展某些规则，但是由于某些原因无法正常工作

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

如果我说没有愚蠢，您就无法将父母变成孩子。你不能上瀑布。要执行所需的操作，可以将prop传递到父组件Header中以处理边框底部。我有一个基本的背景示例，向您展示了如何进行：https://codesandbox.io/s/dreamy-newton-7zxhm。告诉我是否很好

Answer 2

在最后一个块中，您缺少color的{{1}}和style。

应该是：

border-bottom

或者，您可以保持最后一个块不变，只需像这样修改&[aria-expanded='true'] ${Header} { border-bottom: 1px solid ${Base.AzulBordaCard} !important; }定义就可以定义一个默认边框：

Header

来自样式组件的扩展规则不起作用

2 个答案: