React：Css module：自动生成className

change configuration

npm run eject

得到config文件并可修改；

进入webpack.config.dev.js

在css options中增加

modules:true localIdentName:'[name]__[local]__[hash:base64:5]'

module可为css自动创建不重复的class；

最新的react无需手动修改

将css文件命名为 name.module.css即可；

App.js

import React, { Component } from 'react'; import Cssclasses from './App.module.css'; import Person from './Person/person'; class App extends Component{ state={ persons:[ {id:'asfa1', name:'Max' , age:28}, {id:'asfa2', name:'manu' , age:24}, {id:'asfa3', name:'Snie' , age:26} ], isshow:false }; clicktoshow =(event)=>{ const tmp = this.state.isshow; this.setState({isshow:!tmp}); } deletePersonHandler=(personIndex)=>{ // const persons = this.state.persons.slice(); //返回一个copy const persons = [...this.state.persons]; //内容复制 persons.splice(personIndex,1); this.setState({persons:persons}); } nameChangedHandler = (event,id)=>{ const personIndex = this.state.persons.findIndex(p=>p.id===id); const person = { ...this.state.persons[personIndex] }; person.name=event.target.value; const persons=[...this.state.persons]; persons[personIndex]=person; this.setState({persons:persons}); } render(){ let person=null; let btnClass=[Cssclasses.Button]; //一个指向特殊名字的指针 if(this.state.isshow){ person=( <div> { this.state.persons.map((person,index)=>{ return <Person name={person.name} age={person.age} click={this.deletePersonHandler.bind(this,index)} key={person.id} changed={(event)=>this.nameChangedHandler(event,person.id)} /> }) } </div> ); btnClass.push(Cssclasses.Red); } const classes=[]; if(this.state.persons.length<=2){ classes.push(Cssclasses.red); //classes =['red'] } if(this.state.persons.length<=1){ classes.push(Cssclasses.bold); //classes =['red','bold'] } return ( <div className={Cssclasses.App}> <h1>Hi i am a React App!</h1> <p className={classes.join(' ')}>It is working!</p> <button className={btnClass.join(' ')} onClick={this.clicktoshow}>Switch name </button> {person} </div> );}; } export default App;

App.module.css

.App { text-align: center; } .red{ color:red; } .bold{ font-weight: bold; } .Button{ background-color:green; color:white; font:inherit; border:1px solid blue; padding:8px; cursor:pointer; } .Button:hover{ background-color:lightgreen; color:black; } .Button.Red{ background-color:red; } .Button.Red:hover{ background-color:salmon; }

写法2：对App类设置style

App.js

import React, { Component } from 'react'; import Cssclasses from './App.module.css'; import Person from './Person/person'; class App extends Component{ state={ persons:[ {id:'asfa1', name:'Max' , age:28}, {id:'asfa2', name:'manu' , age:24}, {id:'asfa3', name:'Snie' , age:26} ], isshow:false }; clicktoshow =(event)=>{ const tmp = this.state.isshow; this.setState({isshow:!tmp}); } deletePersonHandler=(personIndex)=>{ // const persons = this.state.persons.slice(); //返回一个copy const persons = [...this.state.persons]; //内容复制 persons.splice(personIndex,1); this.setState({persons:persons}); } nameChangedHandler = (event,id)=>{ const personIndex = this.state.persons.findIndex(p=>p.id===id); const person = { ...this.state.persons[personIndex] }; person.name=event.target.value; const persons=[...this.state.persons]; persons[personIndex]=person; this.setState({persons:persons}); } render(){ let person=null; let btnClass=''; //一个指向特殊名字的指针 if(this.state.isshow){ person=( <div> { this.state.persons.map((person,index)=>{ return <Person name={person.name} age={person.age} click={this.deletePersonHandler.bind(this,index)} key={person.id} changed={(event)=>this.nameChangedHandler(event,person.id)} /> }) } </div> ); btnClass=Cssclasses.Red; } const classes=[]; if(this.state.persons.length<=2){ classes.push(Cssclasses.red); //classes =['red'] } if(this.state.persons.length<=1){ classes.push(Cssclasses.bold); //classes =['red','bold'] } return ( <div className={Cssclasses.App}> <h1>Hi i am a React App!</h1> <p className={classes.join(' ')}>It is working!</p> <button className={btnClass} onClick={this.clicktoshow}>Switch name </button> {person} </div> );}; } export default App;

App.module.css

.App { text-align: center; } .red{ color:red; } .bold{ font-weight: bold; } .App button{ background-color:green; color:white; font:inherit; border:1px solid blue; padding:8px; cursor:pointer; } .App button:hover{ background-color:lightgreen; color:black; } .App button.Red{ background-color:red; } .App button.Red:hover{ background-color:salmon; }

Person.js

import React from 'react'; // import './Person.css'; import classes from './person.module.css'; const person = (props)=>{ return( // <div className="Person" style={style}> <div className={classes.Person}> <p>I Am a person!</p> <p onClick = {props.click}>{props.name}</p> <p>i'm {props.age}</p> <p>{props.children}</p> <input type="text" onChange={props.changed} value={props.name}/> </div> ) }; export default person;

Person.module.css

.Person{ margin: 16px auto; color: rgb(73, 54, 47); width: 60%; border: 1px solid #eeeeee; box-shadow:0 2px 3px rgb(208, 214, 214); padding: 16px; text-align: center; } @media (min-width: 500px){ .Person{ width: 450px; } }

:global .Post{}

则post可被直接作为 className=“Post”