Javascript 使用CSSModules和React组件通过prop动态CSS

我正在学习如何将

css模块

与react一起使用，下面是一个不带react的复选框的工作示例

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

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

export default CSSModules(Checkbox, styles)

---

您可以创建一个不同的类来组成要更改颜色的类：

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

并在获得匹配的

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)

从“React”导入React
从“react css模块”导入css模块
从“./checkbox.css”导入样式
函数getStyleNameForColor（颜色）{
colorToStyleName={
红色：“复选框——样式为红色”
};
返回colorToStyleName[color]| |'复选框--styled'；
}
导出功能复选框（道具）{
返回
}
导出默认CSS模块（复选框，样式）

更好的方法是使用而不是

getStyleNameFor（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)