react怎么写style

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（视频）