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多端统一框架?

React怎么渲染html标签

2021年前端React面试题大汇总(收藏)

React中页面如何传值

React中支持fetch吗

React中如何引入css样式

React this绑定的几点思考

React中图片用什么标签

React设置文件路径别名的具体方法你知道么

webpack 不识别React怎么办

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




打赏

取消

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

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

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

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

评论

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

    暂无评论...