React中的css如何使用
这篇文章主要介绍了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如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。