如果我有一个react组件并且我想传入一个className,我该如何使用CSS模块执行此操作 . 它目前只提供className但不提供哈希生成的css模块名称,我将获得 <div className={styles.tile + ' ' + styles.blue}>
这是我的 Tile.js 组件
import React, { Component } from 'react';
import styles from './Tile.css';
class Tile extends Component {
render() {
return (
<div className={styles.tile + ' ' + this.props.color}>
{this.props.children}
</div>
);
}
};
export default Tile;
Tile.css
@value colors: "../../styles/colors.css";
@value blue, black, red from colors;
.tile {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.black {
background-color: black;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
因此,您可以看到我在我的Author Tile中按如下方式初始化此Tile包装器组件,但我想将颜色道具传递给组件:
AuthorTile.js
return (
<Tile orientation='blue'>
<p>{this.props.title}</p>
<img src={this.props.image} />
</Tile>
);
1 回答
来自文档:
然后
<div className={styles[this.props.color]}
应该做的工作,例如: