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; 新建一个 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 使用
以上就是react怎么写style的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |