Looking for advice on the best way to dynamically insert SASS classes using React.
I have a React component that takes in two props: componentId and color. These components are displayed as a list, and each time they're rendered, I want to apply the background color based on this.props.backgroundColor.
While I know I can achieve this with inline styles, it's not the recommended approach due to maintenance issues. Currently, I have an SCSS file containing various classes.
Any suggestions on how I could dynamically add an SCSS class based on this.props.componentId and this.props.backgroundColor?
For instance, if the component has these props:
componentId: list-item-123456789
color: #00FFFF
How can I add the following SCSS class to my style.scss file from the React component?
.list-item-123456789 {
background-color: #00FFFF;
}
Should I use styled-components for this task? Or would it be better practice to stick with inline styles despite what I've read? I want to avoid any pitfalls but unsure of the best approach for the solution above.