As a newcomer to React, I have encountered a component where colors were previously hard-coded. My goal is to pass a color through props instead.
In addition, I am utilizing styledComponents for the styling, in case that affects anything.
&[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};
}
}
}
}
} `;
This section of the styling involves passing a prop. I'm uncertain if I'm approaching this correctly.. Additionally, the "theme" is extracted from a themes.ts file which should be provided by a theme provider from another file. The commented out part indicates where the style was originally hard-coded.
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>
);
} }
Here is the render function.. I'm somewhat unsure about what's happening here. Radiowrapper is the name of the styling being used. Moreover, I'm working on existing code belonging to someone else, hence my lack of complete understanding.