本文摘自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多端统一框架?
React怎么渲染html标签
2021年前端React面试题大汇总(收藏)
React中页面如何传值
React中支持fetch吗
React中如何引入css样式
React this绑定的几点思考
React中图片用什么标签
React设置文件路径别名的具体方法你知道么
webpack 不识别React怎么办
更多相关阅读请进入《React》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » react怎么写style