关于 React.js 的 CSS 选择器

Question

这是我的第一个问题，我对 React 很陌生。

我想通过 React 的

useContext

更改颜色“Darkmode”和“LightMode”，使用名为“Change DarkMode”的简单按钮，当我看到开发人员工具时。一旦按下此按钮，我们可以看到 classname 实际上正在工作，因此它从“app false”更改为“app dark-theme”，但颜色没有改变。所以我猜 css 选择器不好？

之前的类名

之后的类名

在App.jsx中，我写

function App() {
  const { darkblue } = useDarkBlue();

  return (
    <div className={`app ${darkblue && "dark-theme"}`}> 
// Here is for change classname from defalut to "dark-theme" and this class name is connected with CSS.
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

export default function AppWithProvider() {
  return (
    <DarkBlueProvider>
      <App />
    </DarkBlueProvider>
  );
}

在 CSS 中，

:root {
  --font-family-title: "PaytoneOne-Regular";
  --font-family-text: "JosefinSans-Regular", sans-serif;
  --font-color: black;
  --background-gradient: linear-gradient(
    to bottom,
    #73bde6,
    #8ed6d7,
    #adeae434
  );
  --background-gradient-false: linear-gradient(to bottom, #07399c, #95aadc);
}

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

.main {
  min-height: calc(100vh-117px);
}

app false {
  background: var(--background-gradient);
}

我尝试用“div app false”和“div app

dark-theme"

”更改className

Answer 1

要选择类名“app false”，您应该使用CSS选择器

.app.false

，如下所示：

.app.false {
  background: var(--background-gradient-false);
}

以下是不同选择器之间的区别：

app false

：选择标签

false

，它是标签

app

的子标签

<app>
   <false /> /* <- this tag will get selected */
</app>

app.false

：选择类名为 false

 的标签 

app

<app classname="false" />

.app.false

：选择任何带有类名

app

和类名

false

:

的标签

<div classname="app false" />

、

<div classname="false app" />

、

<span classname="app false" />

...都会被选中。

有关 CSS 选择器的更多信息，您可以阅读 W3Schools 参考 了解基础知识，并阅读 MDN 文档 了解更多详细信息。

至于您的具体问题，我建议您不要使用

false

作为课程。您可以使用

.app

作为默认主题，使用

.app.dark-theme

作为深色主题。要合并课程，我还建议您使用 clsx，您可以通过

npm install clsx

安装。这是结果的示例：

反应

import clsx from 'clsx';

function App() {
  const { darkblue } = useDarkBlue();

  return (
    <div className={clsx("app", darkblue && "dark-theme)}> 
// Here is for change classname from defalut to "dark-theme" and this class name is connected with CSS.
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

export default function AppWithProvider() {
  return (
    <DarkBlueProvider>
      <App />
    </DarkBlueProvider>
  );
}

CSS

:root {
  --font-family-title: "PaytoneOne-Regular";
  --font-family-text: "JosefinSans-Regular", sans-serif;
  --font-color: black;
  --background-gradient: linear-gradient(to bottom, #07399c, #95aadc);
  --background-gradient-dark: linear-gradient(
    to bottom,
    #73bde6,
    #8ed6d7,
    #adeae434
  );
}

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

.main {
  min-height: calc(100vh-117px);
}

.app {
  background: var(--background-gradient);
}

.app.dark-theme {
  background: var(--background-gradient-dark);
}

祝您在 Web 和 React 学习之旅中一切顺利！