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的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |