我如何能添加css样式到react中导入的组件

jjhzyzn0 于 2022-12-30 发布在 React

关注(0)|答案(4)|浏览(109)

我有一个菜单组件，希望在不同页面中使用不同的背景颜色。
我如何添加css类到导入的组件
我测试了代码吹，但没有工作

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

4条答案

您可以为该部分添加内嵌样式

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

这应该行得通。
确保在menu.css中你有类而不是id（以及css文件的有效路径）。

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

或者试试!重要的是。

.thisIsClass {
  color: #000 !important;
}

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

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

编辑：你不能直接给组件设计样式，只能解析 prop 。

这应该对你有用。

import Menu from './../Menu/Menu';
import style from "./menu.css";

<Menu className={style.menuBg}/>

希望能有所帮助!