Как я могу динамически назначать реквизиты в качестве переменных для цветов из моей собственной цветовой палитры в scss / css с помощью React?

Question

Я вызываю компонент «MyRadioButton» со следующими реквизитами:

<MyRadioButton
          label="Radio Group"
          theme="custom-red"  //this line
          error="Field is required "
          radioBtns={options}
          id="radioBtns"
          name="radioBtns"
          getValue={this.getValue}
        />

Я создал реагирующий компонент «MyRadioButton», который будет принимать имя цвета (тему) в качестве реквизита.

На основе этой опоры я хочу назначить переменную в файле s css моих компонентов, который будет принимать цветовой код из моей пользовательской цветовой палитры.

my-radio-button.s css

/* custom color pallet */
  $custom-orange: #F060D6;
  $custom-red: #BB532E;
  $custom-blue: #4C9FEB;

.my-radio-buttons {
  .input{
     border: 2px solid $custom-red; // i want to assign the color variable based on input prop value to this property
   }
}

Я уже пробовал установить переменную в css root с javascript и получить доступ к ней с помощью функции переменной var (), она отлично работает. Но из-за некоторых ограничений я не хочу использовать этот подход. также, поскольку список цветовых палитр огромен, я не хочу использовать отдельные классы для всех.

Я ищу какое-то другое решение или другой подход.

Answer 1

Таким образом, вы можете использовать комбинацию пользовательских css переменных и переданного вами свойства theme . В вашем css вы должны определить базовый цвет границы, например:

.my-radio-buttons {
  --theme-color: red;

  input {
     border: 2px solid var(--theme-color);
   }
}

Это может быть обновлено вашими компонентами через componentDidMount или useEffect с переданной темой:

const MyRadioButton = props => {
  const { theme } = props;

  React.useEffect(() => {
    const input = document.querySelector(".my-radio-buttons input");

    input.style.setProperty("--theme-color", props.theme);
  }, []);

  return (
    <div className="my-radio-buttons">
      <input />
    </div>
  );
};

В зависимости от стиля кода вы можете заменить querySelector на ref.