Компонент Box vs css prop для макета, что выбрать?

Question

Сейчас я использую style-system и Emotion и не могу понять, какой подход более правильный.
У меня есть компонент "Box", который обрабатывает различные свойства, такие как mx, my, px, py, bg, color и многие другие, из https://styled-system.com/api/.

Иногда у меня возникают следующие ситуации: у
меня есть какой-то компонент «Выбрать», у которого нет свойств стилизованной системы. И я должен добавить некоторые поля (например) к этому Select. Я могу сделать это следующими способами:

Лично мне вариант css кажется более читабельным, но я уже использую компонент «Коробка» во многих местах проекта и не знаю, менять ли их синтаксис или нет.

перед :

      <Box mx={1}/>

после :

      div css={css({mx=1})}

Какой вариант в какой ситуации будет правильнее?

Answer 1

Это довольно субъективно. Ваше поле не то же самое, что и div. Предположительно, у вас есть правило рамки для Boxсоставная часть. Давайте не будем путать всю причину использования коробки. Если вы просто хотите, чтобы у вашего выбора были все реквизиты коробки, ну, это уже должно быть, если ваше определение Select выглядит следующим образом

      const Select = ({ onClick, ...styleProps }) => <Box {...styleProps}><p>select me</p></Box> 

export default Select