如何在react中为导入的组件添加css样式

Question

我有一个菜单组件，希望在不同的页面中有不同的背景颜色。

如何将css类添加到导入的组件中

我测试代码吹，但没有工作

import Menu from './../Menu/Menu';
import "./menu.css"
.
.
.
<Menu className="menuBg"/>

Answer 1

您可以为该部件添加内联样式

Answer 2

也许可以将类作为道具传递给组件？https://stackblitz.com/edit/react-ts-bhi95v

Answer 3

这应该可以工作。

确保在menu.css中有类而不是id。(以及css文件的有效路径(。

.thisIsClass {
color: #000;
}
#thisIsID {
color: #000;
}

或者试试！重要的

.thisIsClass {
color: #000 !important;
}

你也可以直接添加样式到你的div，

<div style={{ backgroundColor: "#ff00ff", color: "#f00" }}>

编辑：不能直接设置组件样式，只能解析道具。

Answer 4

这应该对您有效。

import Menu from './../Menu/Menu';
import style from "./menu.css";
<Menu className={style.menuBg}/>

希望它能有所帮助！