reactjs - 反应js | 反应路由器dom | 多个文件 ..module.scss | 风格问题

Question

我的module.scss文件有问题。

我将 react-router-dom 用于多个页面。

我在每个页面的“body”标签上都有不同的样式，但是样式重叠..

如何在不重叠样式的情况下对每个页面的正文标签进行样式化？

或者我如何确保当 react-router-dom 更改页面时它不会加载另一个页面上使用的样式？

标签： reactjssassreact-router-dom

Answer 1

一般来说，只使用 SASS 和 react-router-dom，没有内置的方法可以做到这一点。

或者，您可以实现自己的方式来执行此操作。但是考虑使用 React 组件来设置样式而不是 body，因为不应该直接修改 body 以防止样式冲突。

也就是说，对于每个react-router-dom挂载的页面，您可以创建一个任意类名来使用：

.home {
  background: red;
}

.about {
  background: rebeccapurple;
}

然后在组件安装时将该类添加到正文中，并在组件卸载时删除。

import "./styles.css";

import React, { useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link> / <Link to="/about">About</Link>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  useEffect(() => {
    document.body.classList.add("home");
    return () => document.body.classList.remove("home");
  }, []);
  return <h2>Home</h2>;
}

function About() {
  useEffect(() => {
    document.body.classList.add("about");
    return () => document.body.classList.remove("about");
  }, []);
  return <h2>About</h2>;
}

useEffect安装组件时调用 body 。如果您提供一个空数组作为第二个参数，它将永远不会再次执行。更多细节在这里。仅当您的组件被卸载时，才会执行返回的函数。

useEffect(() => {
  document.body.classList.add("home");
  return () => document.body.classList.remove("home");
}, []);

https://codesandbox.io/s/wonderful-frog-88yel

为了提高代码的可重用性，您还可以创建一个可重用的自定义钩子并隔离重复的行为：

const useBodyClassName = (className) => {
  useEffect(() => {
    document.body.classList.add(className);
    return () => document.body.classList.remove(className);
  }, []);
};