这篇文章主要介绍了React中的css如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇React中的css如何使用文章都会有所收获,下面我们一起来看看吧。

一、行内样式使用

importReactfrom'react'classHomeextendsReact.Component{render(){return(<div><h4style={{fontColor:'green',marginTop:'5px'}}>标题</h4></div>)}}exportdefaultHome二、声明样式使用

importReactfrom'react'classHomeextendsReact.Component{render(){consttitle={fontColor:'green',marginTop:'5px'}return(<div><h4style={tilte}>标题</h4></div>)}}exportdefaultHome三、外部引入

importReactfrom'react';import'./Home.css';classHomeextendsReact.Component{render(){return(<div><h4className="title">标题</h4></div>)}}exportdefaultHome四、Style Component

npminstall--savestyled-components

importReactfrom'react';classHomeextendsReact.Component{constTitle=styled.h4`margin-top:5px;font-color:green;`;render(){return(<div><Title>标题</Title></div>)}}exportdefaultHome六、Radium

importReactfrom"react";importRadiumfrom'radium';letstyles={title:{color:'green',marginTop:'5px'':hover':{fontColor:'16px'}},info:{color:'#666'}};classHomeextendsComponent{render(){return(<div><h4style={[styles.title,styles.info]}>标题</h4></div>);}}exportdefaultRadium(Home);

关于“React中的css如何使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“React中的css如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。