I’ve a component with this input slider (works with radio buttons)
<input
checked={settings[0]?.payments.length === 1 ? 'checked' : null}
type='radio'
id={payment.value}
value={payment.value}
onChange={
settings[0]?.payments.length === 1
? setState(payment.value)
: handleChange
></input>
And the checked radio button has this static bg color
[type=radio]:checked + label {
background-color: #eab308;
border-radius: 8px;
}
I work with tailwind so normaly i style inside my jsx file but for more complex stuff i use extra css file.
This is how i use it inside the jsx (Data comes from MongoDB)
const settingsstate = useSelector((state) => state.systemSettingsReducer);
const { settings } = settingsstate;
const bg = settings[0]?.color[0]?.bgColor;
<div className={`${bg}`}>
How can i use this dynamic colors inside my css file?
2
Answers
You can use CSS variables:
I recommend use the valeu that you are changing
payment.value
as parameter to change the Style Class. So you can do like: