react总结-----style的写法

本篇文章复习在react中style的4种写法

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标签.这种方式在大项目中比较常见.

5. 总结

还有一些其他的写法,这里就不记载了,以上的用法就足够在项目中使用了!