Html React.Js/Typescript：如何通过道具传递颜色？

我是新的反应，我正在与一个组件，其中的颜色以前硬编码的工作。我希望能够通过道具传递颜色

我还使用styledComponents进行样式设置，如果这有什么不同的话

      &[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>

);

render（）{
var{className，type，radioClasses，label，…other}=this.props；
返回(
{“+this.props.label}
);

} }

---

这是渲染图。。我不太清楚这里发生了什么。Radiowrapper是样式的名称。另外，我正在处理其他人的代码，这就是为什么我不完全清楚发生了什么。

您的样式文件如下所示

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

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

组件文件如下所示

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

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

render（）{
返回(
);
}

您可以将组件porps中的颜色传递为

<RadioWrapper fontColor="#AAAAAA"/>