Javascript 用css网格构建反应库布局的最佳方法

我想用Instagram等多个组件构建react应用程序。 来自HTML/CSS/JS——每个页面都有自己的设计和布局。 现在react不会更改页面，它只是呈现不同的组件，比如登录页面、配置文件页面、提要等等。 现在我想知道如何在包含多个复杂组件的react应用程序中实现css网格。 我应该在App.js上做一个网格布局，包含所有主要组件，比如注册、登录、提要等等吗 或者我应该为每个用作“页面”（注册、登录、订阅等）的组件创建一个网格&忽略App.js样式

编辑- 每个组件都有不同的外观 例如，注册页面将有一个注册表单 登录页面将具有不同的外观形式和设计 提要是一个组件，它将标题和该用户的图像显示为库。 搜索将所有用户配置文件显示为gallery

所以我在问我是否应该在身体{}中进行一些基本的重置 并将每个组件的样式设置为一个页面本身或我是否应该像App.js那样构建一些主布局（App.scss将保存样式本身）

函数应用程序（）{
const history=useHistory（）；
const[user，setUser]=useState（{}）；
useffect（（）=>{
异步函数getMe（）{
试一试{
const user=wait UserService.me（）；
如果（！用户）{
history.push（'/login'）；
返回；
}
setUser（用户）；
}捕捉（错误）{
控制台日志（err）；
}
}
getMe（）；
}，[历史]；
函数isLoggedIn（）{
返回布尔值（Object.keys（user.length））；
}
返回(
{isLoggedIn（）&&}
);
}
导出默认应用程序；
[1]: https://i.stack.imgur.com/Gadhg.png

是的，您可以在App.js样式中使用网格布局，但请记住，您在App.js样式中定义的每个样式都会影响其他组件。如果您想在本地为每个组件应用样式，您可以尝试CSS模块或博客上所说的样式化组件。

我用一个图像示例编辑了我的问题。每个组件还有一个scss文件，如App.js App.scss Header.js Header.scss

function App() {
    const history = useHistory();
    const [user, setUser] = useState({});

    useEffect(() => {
        async function getMe() {
            try {
                const user = await UserService.me();
                if (!user) {
                    history.push('/login');
                    return;
                }
                setUser(user);
            } catch(err) {
                console.log(err);
            }
        }
        getMe();
    }, [history]);

    function isLoggedIn() {
        return Boolean(Object.keys(user).length);
    }

  return (
      <UserContext.Provider value={{user, setUser}}>
        <div className="App">
            <div className="main">
              <div className="container">
                <Switch>
                    <Route path="/register">
                        <Register />
                    </Route>
                    <Route path="/login">
                        <Login />
                    </Route>
                    <Route path="/post/create">
                        <PostCreate />
                    </Route>
                    <Route path="/post/:id">
                        <PostPage />
                    </Route>
                    <Route path="/profile/:username">
                        <Profile />
                    </Route>
                    <Route path="/search">
                        <Search />
                    </Route>
                    <Route path="/" exact>
                        <Feed />
                    </Route>
                </Switch>
              </div>
            </div>
            { isLoggedIn() && <Header /> }
        </div>
      </UserContext.Provider>
  );
}

export default App;


  [1]: https://i.stack.imgur.com/Gadhg.png