react怎么写style-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

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;