使用 CSS 网格构建反应基础布局的最佳方法

Question

我想构建包含多个组件的 React 应用程序，例如 Instagram。 来自 HTML/CSS/JS - 每个页面都有自己的设计和布局。 现在反应不会改变页面，它只是呈现不同的组件，例如登录页面、个人资料页面、提要等。 现在我想知道如何在包含多个复杂组件的 React 应用程序中实现 CSS 网格。 我是否应该在 App.js 上进行网格布局，其中包含所有主要组件，如注册、登录、提要等 或者我应该为我用作“页面”（注册、登录、提要等）的每个组件创建一个网格并忽略 App.js 样式？

编辑 - 每个组件都有不同的外观 例如注册页面将有一个注册表单 登录页面将有不同的外观形式和设计 feed 是一个组件，它将显示标题和该用户的图像作为图库。 搜索会将所有用户个人资料显示为图库。

所以我问我是否应该在正文中放置一些基本的重置{} 并为每个组件设置样式，就好像它本身就是一个页​​面一样或我应该像在 App.js 中那样构建一些主要布局（App.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

Answer 1

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