css - 如何在 ReactJS 中为页面添加不同的 css 样式？

Question

我正在使用 ReactJS 创建一个多页面应用程序，我希望不同的页面具有不同的样式，尤其是 Logo 位置。

这是我的 App.js 文件

import React from 'react';

import Login from './user/Login';
import Auth from './user/Auth';
import Home from './user/Home';
import ResetPassword from './user/ResetPassword';
import './App.css';

const App=()=>{
        //ROUTING
 }

export default App;

最后导入的文件总是会覆盖整个应用的样式属性。我需要相应地更改每个页面中 Logo 的位置以及其他内容。如何为每个页面添加不同的 css 属性？

Answer 1

您可以使用或模块 css(为此您必须在 webpack 中进行更改)。 https://programmingwithmosh.com/react/css-modules-react/您也可以使用包样式组件 https://www.styled-components.com/在这种情况下，您对所有组件都有独特的样式。