为什么要用?
我的react工程中使用了css-module,当对同一元素附加多个CSS样式时报错
报错:
<div className={style.font style.color}>报错</div>
首先在package.json引入该组件(npm install classnames
)
然后在代码中写入
import * as React from "react";
import styles from "./index.css";
import classNames from "classnames";
const ClassNames_example = () => {
const mixClass = classNames({ font: true, color: true });
return (
<div>
<div className={styles.font}>style_font</div>
<div className={styles.color}>style_color</div>
<div className={mixClass}>style_mix</div>
</div>
);
};
export default ClassNames_example;
结果
样式需动态变化时
const [state, setState] = React.useState(0);
const mixClass = classNames({ font: state === 0, color: true });