Можно ли делать сетку в корневом (предкорневом) компоненте App.js в React'е?

Question

[Gimir]

Добрый вечер, вот скрин кода. Слева в редакторе как вы видите открыты компонент App.js и css файл к нему.
Вопрос: можно ли (не считается ли это плохой практикой) делать сетку приложения вот таким образом в основном компоненте, а уже в дивы добавлять другие компоненты стилизованные с помощью styled-components? Просто кроме хедера, сайдбара и контента у меня больше ничего нет, и других страниц тоже.

Answer 1

[camelCaseVlad]

В App.css оставляйте только глобальные стили*.

div1 и div2 являются отдельными, изолированными компонентами, так что их классы будут импортированы в соответствующих файлах.

*данный подход не будет являться плохой практикой, напротив, это верный подход. Стоит только посмотреть на файл App.css в create-react-app, где вы найдете глобальные стили для приложения.

Comments

[Gimir]

Стоит ли мне тогда тут что-то менять? Как вы сказали я прописал сетку в App.css.

[camelCaseVlad]

Как и App.js, создайте BodyWrapper.js и импортируйте свои классы.

БодиВраппер будет компонентом, который принимает и рендерит children.

// BodyWrapper.js


import React from 'react';
import './BodyWrapper.css';

function BodyWrapper ({ children }) {
    return (
        <div className="bodyWrapper">{children}</div>
  )
}

// App.js

<BodyWrapper>
  <Новый компонент />
<BodyWrapper />

[Gimir]

camelCaseVlad, значит я думал в правильном направлении) сначала так и сделал, но затем подумал, нужен ли этот компонент вообще, не лишний ли он, и сделал то что сделал. Спасибо за ваше время и поддержку.