使用css模块做出反应如何将className作为prop传递给组件

loading...


9

如果我有一个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回答

  • 6

    来自文档:

    避免使用多个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>
    }
    

loading...

评论

暂时没有评论!