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

【问题标题】：What is the best way to style a component explicitly?明确设置组件样式的最佳方法是什么？
【发布时间】：2020-05-27 20:34:52
【问题描述】：

我们如何在 react.js 中显式地为组件添加样式。我明确表示，如果我们正在访问该组件，则应该应用样式，如果我们正在离开该组件，则应该删除该样式。

场景 1 假设如果我们有两个组件 day 和 night 并且应用程序的默认 background-color 是白色的。然后，如果我使用\访问night 组件，那么back-ground 颜色应该变为黑色，如果我离开夜间组件，背景颜色应该变回默认值

解决方案 1

//night component
import React from "react";

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

然后将具有background-color: white 属性的其他样式表导入其他组件。但这并不理想，因为我们最终可能会将样式表添加到所有其他组件中。

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

您可以阅读 this 以了解您可以为 react 组件设置样式的几种方法的概述，但对于您的具体情况，我建议您使用 Styled Components。它是一个 js 库，将旧样式表与内联 css 结合在一起，让您动态地设置组件的样式。您可以阅读文档并亲自尝试，但在您的情况下，您将能够拥有一个 background 属性，其值将取决于一个道具（例如day 或night）。试试看，你不会后悔的:)

【讨论】：

【解决方案2】：

如果有相当多的逻辑来决定你可以使用classnames

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>

}

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

【讨论】：