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

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

1 个答案: