how can i add css style to imported component in react-CodePudding

i have a menu component that want to have different background color in different pages.

How can i add css class to an imported component

I test code blow but didn't works

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

CodePudding user response：

You can add inline styling for that part

CodePudding user response：

you can use styled component for that

CodePudding user response：

Maybe pass class as props to your component? https://stackblitz.com/edit/react-ts-bhi95v

CodePudding user response：

This should work.

Make sure that in menu.css you have classes and not id. (And valid path to css file).

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

Or try with !important.

.thisIsClass {
  color: #000 !important;
}

You can also direct add style to you div,

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

EDIT: You can't style Components direct, only parse props.