html - React.Js/ typescript : How can I pass colors through props?

Question

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

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

}`;

这是我要传递 Prop 的样式部分。我不确定我这样做是否正确..“主题”也是从 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

你的样式文件看起来像这样

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

组件文件看起来像这样

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