React.Js / Typescript: как я могу передавать цвета через реквизит?

Question

Я новичок в React и работаю с компонентом, где цвета ранее жестко заданы.Вместо этого я хочу, чтобы можно было передавать цвет через реквизит.

Я также использую стилевые компоненты для стиля, если это имеет какое-либо значение.

      &[checkedcolor] {
    /*&[checkedcolor="orange"] {*/
      &:checked {
        + .lbl {
          border-color: ${props => props.theme.borderColor};
          color: ${props => props.theme.color};
        }
      }
    }
  }
  &[uncheckedcolor] {
    /*&[uncheckedcolor="lightgray"] {*/
      + .lbl {
        color: ${props => props.theme.color};
      }
    }
  }
}

} `;

Это та часть стиля, где я хочу пройти в опоре.Я не уверен, правильно ли я это делаю .. Также "theme" извлекается из файла themes.ts, который должен быть передан поставщиком тем из другого файла.Закомментированная часть - это место, где стиль был ранее жестко закодирован.

  render() {
var { className, type, radioClasses, label, ...other } = this.props;
return (
  <RadioWrapper className={"radio-switch-item-wrapper " + radioClasses}>
    <input type="radio" className="ace radio-switch-item" {...other} />
    <span className="lbl">{" " + this.props.label}</span>
  </RadioWrapper>

);

}}

Вот рендер ... Я не совсем уверен, что здесь происходит.Radiowrapper - это название стиля.Кроме того, я работаю над чужим кодом, поэтому мне не совсем понятно, что происходит.

Answer 1

Вы можете передать цвет в компонентах porps как,

<RadioWrapper fontColor="#AAAAAA"/>

, затем получить в стилизованных компонентах с реквизитом и набрать как,

const RadioWrapper = styled.div`
color: ${(props:{fontColor:string}) => props.fontColor}`;

Answer 2

Ваш файл стиля будет выглядеть так

const RadioWrapper = styled.div`
  ... otherstyles
  color: ${props => props.color}
`

Файл компонента будет выглядеть так

render() {
  return(
   <RadioWrapper color="#FFFFFF"/> 
  );
}