React Router -> 在链接中使用另一个 CSS [重复]答案

【问题标题】：React Router -> using another CSS in a Link [duplicate]React Router -> 在链接中使用另一个 CSS [重复]
【发布时间】：2023-03-11 09:18:02
【问题描述】：

我对 React 还很陌生，经过几个项目后，我尝试使用 React 路由器/链接组件

我的 App.js

import "./App.css";
import ParticleBackground from "./ParticleBackground";
import { Link } from "react-router-dom";

function App() {
  return (
    <div id="snowflakes">
      <ParticleBackground />
      <CenterTitle />
    </div>
  );
}

function CenterTitle() {
  return (
    <div id="text_div center_all">
      <div className="center_all">
        <h1 className="custom-subTitle">Willkommen zum diesjährigen Weihnachtsbaumverkauf</h1>
        <Link to="/shop"><button>Zum Shop!</button></Link>
      </div>
    </div>
  );
}

export default App;

我的 Index.js

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import App from "./App";
import Shop from './routes/shop';

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="shop" element={<Shop />}/>
    </Routes>
  </BrowserRouter>,
  rootElement
);

我的商店.js

export default function Shop() {
    return (
      <main style={{ padding: "1rem 0" }}>
        <h2>Hier ensteht ein Shop</h2>
      </main>
    );
}

一切正常，我很高兴。但现在我想为我的 shop.js 使用另一个 css 样式表。我尝试了许多不同的方法，例如将样式表链接到标签。但是没有任何效果，每次我运行代码时，我的 /shop 页面都使用 App.css 而不是 Shop.css

这里还有一些应该有所帮助的片段和图片。

我的应用程序.css

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#text_div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 10px;
}

.center_all {
  position: absolute;
  top: 35%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  position: absolute;
  color: white;
}

h1 {
  font-size: 5vh;
}

body {
  height: 100%;
  background-image: url("./images/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

我的 index.css（仅用于基本内容）

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

html, body, #root, .App {
  height: 100%;
}

最后但并非最不重要的是我的 Shop.css

html, body {
    height: 100%;
    background-color: firebrick;
}

所以我总是将 background.jpg 作为背景，而不是 /shop 中的彩色耐火砖。我该怎么办？

【问题讨论】：

标签： javascript css reactjs react-router

【解决方案1】：

您可以通过将 import '../Shop.css'; 添加到您的导入中，将 Shop.css 文件直接导入您的 shop.js。此外，您应该使用更具体的 css 选择器。

【讨论】：