Question

我是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};
      }
    }
  }
}

} `;

这是我希望传递道具的样式的一部分。我不确定我是否正确行事。还有＆＃34;主题＆＃34;从一个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"/> 
  );
}

Answer 2

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

<RadioWrapper fontColor="#AAAAAA"/>

然后

接收带有props的样式组件并输入as，

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

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

2 个答案: