reactjs – CSS模块组成

这是我们的组件：

import React,{PropTypes} from 'react'
import cssModules from 'react-css-modules'
import styles from './style.sass'

const Button = ({Children = 'Submit',...props}) => {
  const align = props.align ? `-${props.align}` : ''
  const type = props.type ? `-${props.typE}` : ''
  const stylename = `button${typE}${align}`

  return (
    <button onClick={props.onClick} {...props} stylename={stylename}>
      {Children}
    </button>
  )
}

Button.propTypes = {
  align: PropTypes.String,onClick: PropTypes.func.isrequired,type: PropTypes.String,}

export default cssModules(Button,styles)

到目前为止这是样式表：

@import "~components/styles/variables"

.button
  color: $button-default
  BACkground-color: transparent
  font-family: $font-family
  font-size: $default-font-size
  font-weight: $font-regular
  line-height: $default-button-height
  margin: 0 $pad 0 0
  outline: none
  padding: 0 $pad*2

.left
  float: left

.right
  float: right

.priMary
  color: $BACkground-interaction
  BACkground-color: $button-default

.button-left
  composes: button,left

.button-right
  composes: button,right

.button-priMary
  composes: button,priMary

.button-priMary-left
  composes: button,priMary,left

.button-priMary-right
  composes: button,right

现在,这很痛苦.我们添加的每个可配置道具都会以指数方式增加我们必须提供的合成类的数量.我们当前可以配置align和type,因为两者都可以为null,所以我们有6种可能的组合,因此除了base .button之外还要创建5个类.
如果我们只添加一个道具,比如只是一个布尔粗体,我们现在必须添加一大堆新的组合类名：.button-bold,.button-left-bold,.button-right-bold,.button- priMary-bold,.button-priMary-left-bold,.button-priMary-right-bold.

我知道使用react-css-modules,我们可以启用allowMultiple设置,允许我们指定多个模块应用于元素,但我的理解是反对最佳实践.我觉得我们必须在这里遗漏一些东西.我们做错了什么？