I have a component that includes an input slider controlled by 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>
The checked radio button is styled with a static background color like this:
[type=radio]:checked + label {
background-color: #eab308;
border-radius: 8px;
}
Normally, I style my components using Tailwind CSS directly in my JSX file. However, for more complex styles, I use an external CSS file.
This is how I apply dynamic colors from the MongoDB data in my JSX:
const settingsstate = useSelector((state) => state.systemSettingsReducer);
const { settings } = settingsstate;
const bg = settings[0]?.color[0]?.bgColor;
<div className={`${bg}`}>
Is there a way to incorporate these dynamic colors into my external CSS file?