样式组件中的多个嵌套组件

Question

我对 Styled Components（来自 SCSS）相当陌生，尽管我大致了解了它的要点。我想知道是否有一种方法可以合并下面的代码。虽然它有效，但它经常重复。有没有办法使用多个嵌套选择器？

const StyledDocuments = styled(Documents)`
  > * > table {
    vertical-align: middle;
  }
  > * > table > tbody {
    vertical-align: middle;
  }
  > * > table > tbody > tr {
    vertical-align: middle;
  }
  > * > table > tbody > tr > td {
    vertical-align: middle;
  }
`;

非常感谢。

Answer 1

嵌套直接从 SASS 移植到样式组件中，并且可以进行任何级别的嵌套。例如：

const Section = styled.section`
  padding: 4em;
  > * > table {
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;

    > * > tr {
      text-align: center;
      height: 4rem;
      border: 1px solid red;

      &:first-child {
        color: blue;
      }

      td {
        vertical-align: middle;
      }
    }
  }
`;

参见运行代码https://codesandbox.io/s/jv0o5ykykv

在您的具体情况下，我想知道为什么您必须嵌套多个 vertical-align 样式，当您将它们应用到父级 table 时，子级可以自动继承它们。

对于文档：https://www.styled-components.com/docs/faqs#can-i-nest-rules

样式组件中的多个嵌套组件

Multiple nested components in styled components

styled-components