Question

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

这是我的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;

最后导入的文件始终会覆盖整个应用程序的样式属性。我需要相应地更改徽标在每页中的位置以及其他内容。如何为每个页面添加不同的CSS属性？

Answer 1

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

Answer 2

创建如下所示的文件夹结构。并导入自己的css文件。如果使用sass，请使用唯一的类名。对于第三方组件，您可能需要在css文件中使用“！important”。

common/
  Avatar.js
  Avatar.css
feed/
  index.js
  Feed.js
  Feed.css
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

您可以阅读以下内容：https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

如何在ReactJS的页面中添加不同的CSS样式？

2 个答案: