[QUESTION] Handling different component 'types' about css-modules-theme

[klimashkin]

Not sure that I've got your question correctly, but if you have a Button with different types, the easiest way to style it would be something like that. Assume your default type is standard, primary and secondary are optionals.

.button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  font: inherit;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  border: none;
}

.standard {
  composes: button;
  background-color: gray;
}

.primary {
  composes: button;
  background-color: green;
}

.secondary {
  composes: button;
  background-color: blue;
}

...

import PropTypes from 'prop-types';
import {PureComponent} from 'react';
import {mixThemeWithProps} from '@css-modules-theme/react';
import styles from './Button.css';

export default class Button extends PureComponent {
  static propTypes = {
    // The html style of the button
    style: PropTypes.oneOf(['standard', 'primary', 'secondary']),
  };

  static defaultProps = {
    style: 'standard',
  }

  render() {
    // Use mixThemeWithProps to pass all the rest props directly to dom
    const {style, theme, ...buttonProps} = mixThemeWithProps(styles, this.props);
   
    // Don't need to concatenate `.button` classname with classname for style type, 
    // because they already concatenated statically using `compose` in css.
    buttonProps.className = theme[style];

    return <button {...buttonProps}>;
  }
}