Dynamic CSS Via Prop Using CSSModules With React Component

I'm learning how to use css modules with react, below is a working example of a checkbox here's what it looks like (pure HTML + CSS fiddle) without react. import React from 'react'

Solution 1:

You could create a different class composing the class you want to change the color:

.checkbox--styled-red {
  composes: checkbox--styled;
  background-image: url("data:image .... FF0000 ....");
}

And set it in the component when you get the matching props.color:

import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './checkbox.css'

function getStyleNameForColor(color) {
  colorToStyleName = {
    red: 'checkbox--styled-red'
  };
  return colorToStyleName[color] || 'checkbox--styled';
}

export function Checkbox (props) {
  return <div styleName="checkbox--container">
    <input styleName="checkbox" type="checkbox" {...props}/>
    <span styleName={getStyleNameForColor(props.color)}></span>
  </div>
}

export default CSSModules(Checkbox, styles)

Better yet, use classnames instead of getStyleNameFor(color).