web-dev-qa-db-ja.com

反応でcssモジュールを使用して、classNameをpropとしてコンポーネントに渡すにはどうすればよいですか？

Reactコンポーネントがあり、classNameを渡したい場合、CSSモジュールでこれを行うにはどうすればよいですか。現在はclassNameを指定するだけで、<div className={styles.tile + ' ' + styles.blue}>に対して取得するハッシュ生成のcssモジュール名は指定しません。

これが私の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;
}

ご覧のとおり、作成者タイルで次のようにこのタイルラッパーコンポーネントを初期化しますが、コンポーネントにカラープロップを渡します。

AuthorTile.js

return (
  <Tile orientation='blue'>
   <p>{this.props.title}</p>
   <img src={this.props.image} />
  </Tile>
);
cssreactjswebpack-style-loadercss-modulescss-loader
11
svnm

ドキュメントから：

単一の要素を記述するために複数のCSSモジュールを使用することは避けてください。 https://github.com/gajus/react-css-modules#multiple-css-modules

@value colors: "../../styles/colors.css";
@value blue, black, red from colors;

.tile {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.black {
    composes: tile;
    background-color: black;
}

.blue {
    composes: tile;
    background-color: blue;
}

.red {
    composes: tile;
    background-color: red;
}

次に<div className={styles[this.props.color]}仕事をする必要があります、例：

render: function(){
  // ES2015
  const className = styles[this.props.color];

  // ES5
  var className = '';

  if (this.props.color === 'black') {
    className = styles.black;
  }

  return (
    <div className={className}>
      {this.props.children}
    </div>
}
11
romseguy