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

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