Как последовательно использовать сетку с компонентами в реагировать

Question

Я занимаюсь разработкой веб-приложения и хочу использовать CSS-макет сетки.Через несколько часов я обнаружил, что большинство моих макетов были неправильными, потому что style был перезаписан более низким компонентом, потеряв gridArea.Мне просто повезло, что это сработало до сих пор.

Поскольку я считаю, что контейнер должен размещать предметы, предметы должны быть независимы от того, что gridArea верхний компонент решит назначить им.Более того, у меня есть фабрики компонентов, поэтому я просто не знаю, какой элемент будет там.Сейчас я делаю этот шаблон во всех моих компонентах:

<div style={{ ...props.style, ...styles.ThisComponent }}>
  my item content...
</div>

Как правильно это сделать?Любая ловушка?

Я переписываю все свои компоненты сейчас, пожалуйста, сэкономьте мне много усилий!

Answer 1

Жесткое кодирование свойства стилей во всех компонентах, которые вы когда-либо будете писать, как описано выше, кажется излишним.Кроме того, использование запасного варианта для браузеров без поддержки CSS-Grid также должно быть приоритетом.

Пробовали ли вы создавать оболочки в styled-components и затем помещать код компонента внутрь?Может ли это спасти вас, если все внешние div будут иметь одинаковый стиль?Синтаксис может немного отличаться от того, что вы написали, но кажется более понятным *

* может быть самоуверенным

Answer 2

Сетка CSS поддерживается только в самых последних браузерах.Разве вы не предпочли бы использовать Grid layout из material-ui?Тогда вы можете настроить все.Вот ссылка , если вы это сделаете, там также приведено описание макета CSS Grid.