react怎么写style


本文摘自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 native和React之间有什么区别?

React中state和props的区别有哪些?

React里面怎么写css

React组件有过哪些性能优化

React怎么循环列表

怎么理解React

怎么解决webstrom写React代码报错问题

React域问题怎么解决

关于html标签style属性的使用方法详解(附具体实例)

React中ref怎么用

更多相关阅读请进入《React》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...