skip to Main Content

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


  1. You can use CSS variables:

    <div style={{ "--bgColor": bg }}>Hello</div>
    
    div {
      background-color: var(--bgColor);
    }
    
    Login or Signup to reply.
  2. I recommend use the valeu that you are changing payment.value as parameter to change the Style Class. So you can do like:

    <input
     checked={settings[0]?.payments.length === 1 ? 'checked' : null}
     type='radio'
     id={payment.value}
     className = {`payment.value == some_thing ? className_true : className_false`}
     value={payment.value}
     onChange={
       settings[0]?.payments.length === 1
       ? setState(payment.value)
       : handleChange
    />
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search