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

【问题标题】：React.Js/Typescript: How can I pass colors through props?React.Js/Typescript：如何通过道具传递颜色？
【发布时间】：2018-11-22 09:06:34
【问题描述】：

我是 React 新手，我正在使用以前硬编码的颜色组件。我希望能够通过道具传递颜色。

我也在使用 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};
      }
    }
  }
}

} `;

这是我想要传入一个道具的样式部分。我不确定我是否做对了。此外，“主题”是从主题.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 是样式的名称。另外，我正在处理别人的代码，这就是为什么我不完全清楚发生了什么。

【问题讨论】：

标签： html css reactjs typescript styled-components

【解决方案1】：

你的样式文件应该是这样的

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

组件文件如下所示

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

【讨论】：

【解决方案2】：

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

<RadioWrapper fontColor="#AAAAAA"/>

然后接收带有 props 的样式化组件并键入 as，

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

【讨论】：