如果我有一个 react 组件并且我想传入一个 className，我该如何使用 CSS module来做到这一点。它目前只提供 className 而不是我将获得的哈希生成的 css module名称 <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;

瓷砖.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 包装器组件，但我想将一个颜色props传递给该组件：

作者Tile.js

return (
  <Tile orientation='blue'>
   <p>{this.props.title}</p>
   <img src={this.props.image} />
  </Tile>
);