时间戳

首页 > 解决方案 > 如何为 ReactJS 中的页面添加不同的 css 样式？

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

问题描述

我正在使用 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 属性？

标签： cssreactjsimport

解决方案

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

推荐阅读