Несколько вложенных компонентов в стилизованных компонентах

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