Javascript 明确设置组件样式的最佳方法是什么？

如何在react中将样式显式添加到组件中。我的意思是，如果我们访问组件，应该应用样式，如果我们离开该组件，应该删除样式

情景1 假设我们有两个组件

day

和

night

，应用程序的默认

背景色为白色。然后，如果我使用\访问
夜间
组件，则背景

颜色应变为黑色，如果我离开夜间组件，则背景颜色应变回默认颜色

解决方案1

//night component
import React from "react";

import './style.css'  //give background-color: black

---

然后将具有

背景色：白色

属性的其他样式表导入其他组件。但这并不理想，因为我们最终可能会将样式表添加到所有其他组件。

您可以阅读，以了解为react组件设置样式的几种方法的概述，但对于您的具体情况，我建议使用。这是一个js库，它将很好的旧样式表与内联css结合在一起，让您动态地设置组件的样式。您可以阅读文档并亲自尝试，但在您的情况下，您将能够拥有一个

背景
属性，其值取决于一个道具（
day
或
night
）。试试看，你不会后悔的：）
如果有足够的逻辑来决定你可以使用的类

从“classNames”导入类名；
常量背景色=（）=>{
const[toggle，setToggle]=useState（true）
//定义css逻辑
const bgtokle=classNames({
“背景色：黑色”：切换，
“背景色：白色”：！切换”
});
//切换状态
常量setToogle=（）=>setToggle（！toggle）
返回{toggle}
}

这是一种方法，还有其他的方法

import classNames from 'classnames';

const BackgroundColor = () => {
   const [toggle, setToggle] = useState(true)

   // Define css logic
   const bgToggle = classNames({
     'background-color: black': toggle,
     'background-color: white': !toggle'
   });

   // Toggle state
   const setToogle = () => setToggle(!toggle)

   return <div onClick={setToogle} className={bgToggle}>{toggle}</div>

}