Conditional CSS

Conditional className

className={`${checked ? "switchbar" : "switchbar2  "} test`}

Conditional style

 style = {{
            backgroundColor: "gray",
            height: 50,
            width: 50,
            borderRadius: 100,
            ...(checked &&{backgroundColor: "yellow"})
        }}

With classname library

npm install classnames
import ClassName from "classnames";
...
className={classNames("test",{
    switchbar1: true,
    switchbar2: false
})}

Last updated

Was this helpful?