在反应中使用css模块如何将className作为道具传递给组件 [英] using css modules in react how can I pass a className as a prop to a component
问题描述
如果我有一个react组件,并且想传递一个className,我该如何使用CSS模块做到这一点.它目前仅提供className,而不提供我生成的哈希生成的CSS模块名称.< div className = {styles.tile +''+ styles.blue}>
这是我的 Tile.js 组件
import'react'中的React,{组件};从'./Tile.css'导入样式;Tile类扩展了Component {使成为() {返回 (< div className = {styles.tile +''+ this.props.color}>{this.props.children}</div>);}};导出默认图块;
Tile.css
@value颜色:"../../styles/colors.css";从颜色中取值蓝色,黑色,红色;.瓦 {职位:相对宽度:100%;底部填充:100%;}.黑色的 {背景颜色:黑色;}.蓝色的 {背景颜色:蓝色;}.红色的 {背景颜色:红色;}
因此,如您所见,我按照以下步骤在作者图块"中初始化了这个Tile包装器组件,但是我想将一个颜色道具传递给该组件:
AuthorTile.js
返回(<瓷砖方向=蓝色">< p> {this.props.title}</p>< img src = {this.props.image}/></Tile>);
来自文档:
避免使用多个CSS模块来描述单个元素. https://github.com/gajus/react-css-modules#multiple-css-modules
@value颜色:"../../styles/colors.css";从颜色中取值蓝色,黑色,红色;.瓦 {职位:相对宽度:100%;底部填充:100%;}.黑色的 {组成:瓷砖;背景颜色:黑色;}.蓝色的 {组成:瓷砖;背景颜色:蓝色;}.红色的 {组成:瓷砖;背景颜色:红色;}
然后< div className = {styles [this.props.color]}
应该可以完成工作,例如:
render:function(){//ES2015const className = styles [this.props.color];//ES5var className ='';如果(this.props.color ==='黑色'){className = styles.black;}返回 (< div className = {className}>{this.props.children}</div>}
If I have a react component and I want to pass in a className, how do I do this with CSS Modules. It currently just gives the className but not the hash generated css module name which I would get for
<div className={styles.tile + ' ' + styles.blue}>
Here is my Tile.js component
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;
}
So as you can see I initialize this Tile wrapper component as follows in my Author Tile, but I want to pass a color prop into the component:
AuthorTile.js
return (
<Tile orientation='blue'>
<p>{this.props.title}</p>
<img src={this.props.image} />
</Tile>
);
From the docs:
Avoid using multiple CSS Modules to describe a single element. 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;
}
Then <div className={styles[this.props.color]}
should do the job, e.g:
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>
}
这篇关于在反应中使用css模块如何将className作为道具传递给组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!