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

【问题标题】：Multiple nested components in styled components样式化组件中的多个嵌套组件
【发布时间】：2018-03-04 21:20:57
【问题描述】：

我对样式化组件（来自 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;
  }
`;

非常感谢。

【问题讨论】：

标签： styled-components

【解决方案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

【讨论】：