时间戳

首页 > 解决方案 > 使用 React Router 路由到另一个组件时 CSS 没有改变

css - 使用 React Router 路由到另一个组件时 CSS 没有改变

问题描述

当我使用react-router-dom将我的应用程序路由到另一个组件时，CSS 不会改变。

这是用于演示的代码的简约版本

应用程序.js

import React from 'react';
import Home from './Home';

function App() {
    return (
      <div>
        <Home></Home>
      </div>
    );
}

export default App;

主页.js

import React from 'react';
import './Home.css';

const Home = () => {
    return (
        <h1>Home</h1>
    );
}

export default Home;

主页.css

body {
    background-color: blue;
}

仪表板.js

从“反应”导入反应；导入'./Dashboard.css'；

import React from 'react';
import './Dashboard.css';

const Dashboard = () => {
    return (
        <div className='content'>
            <h1>Dashboard</h1>
        </div>
    );
}

export default Dashboard;

仪表板.css

.content {
    display: flex;
    align-content: center;
    align-items: center;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Dashboard from './Dashboard';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom';

ReactDOM.render(
    <Router>
        <div>
        <Route exact path='/' component={App} />
        <Route path='/dashboard' component={Dashboard} />
        </div>
    </Router>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: ...
serviceWorker.unregister();

当我执行 /dashboard 时，它会加载 Dashboard 组件，但它会保留从 App 组件所在的 Home 组件加载的先前 CSS。背景保持蓝色。我希望当我路由到另一个组件时，因为我更改了 URL，它会加载新组件附加到它的任何 CSS，并摆脱以前的任何 CSS。那可能吗？

编辑：我在 CodeSandbox 中做了一个例子来说明。由于操场的限制，它与上面的代码有点不同，但功能是相同的。

编辑frosty-cerf-s3dl3

可以看出，作为模块导入最终会全局导入。如果我们评论该行import Home from "./Home";，蓝色背景就会消失。只需导入组件，就会导入整个 CSS，尽管 CSS 是以模块化方式导入的。我不确定我是否遗漏了什么。

编辑2：

以下是我尝试过的不同解决方案：

  1. CSS Modules，但body样式仍然是全局加载的。

  2. 样式化的组件不允许我修改body或html选择器 CSS。他们要求我创建一个<div>元素，然后让该元素跨越整个身体，我将其设置为就好像它是身体一样。这是我不想使用的解决方法，因为为此我宁愿使用 CSS Modules for the whole body spanning 。

  3. 内联样式也不允许我修改body或html选择器 CSS。我还需要使用像<div>Styled 组件中的 body spanning 之类的解决方法。

标签： cssreactjsreact-router-dom

解决方案

问题

当您像在这里一样导入 CSS 时

import './Home.css';

您在全局范围内导入它，这意味着它一旦导入就不会消失。

解决方案

CSS 模块

您想要的是CSS Modules，它的使用方式如下：

import styles from './Home.css';

<a className={styles.myStyleClass}>Hello</a>

样式化的组件

或 CSS-in-js 框架，例如样式化组件，使用如下：

import styled from 'styled-components';

const MyStyledElement = styled.a`
    color: blue;
`;

<MyStyledElement>Hello</MyStyledElement>

常规对象/内联样式

或者只是“常规” CSS-in-js，例如：

const myStyle = {
    color: blue;
}

<a style={myStyle}>Hello</a>

在造型方面有很多选择，这些选择很流行，我鼓励您探索并查看您喜欢的选择。

推荐阅读