本文摘自PHP中文网,作者coldplay.xixi,侵删。
react写style的方法:1、使用内联式;2、使用className方法;3、使用classnames动态修改样式;4、使用【styled-components】插件写标签样式。

本教程操作环境:windows7系统、React17版,该方法适用于所有品牌电脑。
react写style的方法:
1、内联式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import React, { Fragment } from "react" ;
class Style extends React.Component {
constructor(props) {
super(props);
}
render() {
const txtColor = {
color: '#F00'
}
return (
<Fragment>
<h1 style={txtColor}></h1>
</Fragment>
);
}
}
export default Style;
|
这种写法不推荐使用,样式多了之后,会导致代码比较乱!
2、使用className
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import React, { Fragment } from "react" ;
import "./../../style.css" ;
class Style extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Fragment>
<h1 className= "textColor" ></h1>
</Fragment>
);
}
}
export default Style;
|
新建一个.css
文件,将文件引进来,标签中使用className=“textColor”
,就可以使用引入.css文件中类为’textColor’的样式了.一般的项目用这个方式就可以了.
阅读剩余部分
相关阅读 >>
React native和React之间有什么区别?
React中state和props的区别有哪些?
React里面怎么写css
React组件有过哪些性能优化
React怎么循环列表
怎么理解React
怎么解决webstrom写React代码报错问题
跨React域问题怎么解决
关于html标签style属性的使用方法详解(附具体实例)
React中ref怎么用
更多相关阅读请进入《React》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » react怎么写style