Блог

У меня есть несколько компонентов, используемых для создания макетов. Например, строка, столбец и компонент вертикального выравнивания:

 export const Row = styled.div`
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;

  > * {
    margin-left: 10px;
    amp;:last-child {
      margin-left: 0;
    }
  }
`

export const Column = styled.div`
  flex: 1;
`

export const VerticalAlign = styled.div`
  align-items: center;
  display: flex;
`
  

Их совместное использование приводит к созданию ненужных вложенных разделов:

 <Row>
  <Column>
    <VerticalAlign>
      <Icon />
      <input />
    </VerticalAlign>
  </Column>
  <Column>
    <VerticalAlign>
      // ...
    </VerticalAlign>
  </Column>
</Row>
  

Если бы это был просто css, я бы сделал это:

 <div class="row">
  <div class="column vertical-align">
    // ...
  </div>
</div>
  

Я мог бы расширить классы, но это создало бы взрыв одноразовых компонентов для каждой комбинации:

 const VerticalAlignColumn = styled(Column)`
  align-items: center;
  display: flex;
`;

const VerticalAlignRow = styled(Row)`
  //...
`;
  

Есть ли способ легко объединить стили нескольких компонентов в один компонент? Что-то вроде <Row VerticalAlign>...</Row VerticalAlign> ?

Я не мог найти способ сделать так, как ты хочешь.

И лучший подход здесь, как вы сказали (создание расширенных классов) или работа с реквизитами, например:

 export const Column = styled.div`
  flex: 1;

  ${({ verticalAlign }) =>
    verticalAlign amp;amp;
    `
    align-items: center;
    display: flex;
  `}
`;

<Column verticalAlign>
   <Icon />
   <input />
</Column>
<Column>
   <Icon />
   <input />
</Column>

  

Вы также можете работать с классами, но у этого есть некоторые особенности -> Стилизация обычных компонентов React