react写style的方法：1、使用内联式；2、使用classname方法；3、使用classnames动态修改样式；4、使用【styled-components】插件写标签样式。
本教程操作环境：windows7系统、react17版，该方法适用于所有品牌电脑。
react写style的方法：
1、内联式
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
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’的样式了.一般的项目用这个方式就可以了.
3、使用classnames动态修改样式
import react, { fragment } from "react";import classnames from 'classnames'class style extends react.component { constructor(props) { super(props); } render() { return ( <fragment> <h1 classname={classnames('textcolor', {'textcontent': false} ,{'texttitle': true})}></h1> </fragment> ); }}export default style;
这种动态修改样式的方式,需要安装插件classnames.上面的代码中,h1标签的类有textcolor和texttitle.项目中一般也会使用.
4、使用styled-components插件写标签样式
import react, { fragment } from 'react'import styled from 'styled-components'const title = styled.h1` color: #f00;`class style extends react.component { constructor(props) { super(props) } render() { return ( <fragment> <title>复习style</title> </fragment> ) }}export default style
使用styled-components给标签写样式,首先需要安装该插件.上面的代码是定义一个title,通过styled给h1标签设置样式,然后在组件中使用的title就相当于写过样式的h1标签.这种方式在大项目中比较常见.
相关免费学习推荐：javascript（视频）
以上就是react怎么写style的详细内容。