react写style的方法-创新互联

这篇文章主要介绍react写style的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

公司主营业务：成都做网站、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出广阳免费做网站回馈大家。

react写style的方法：1、使用内联式；2、使用className方法；3、使用classnames动态修改样式；4、使用【styled-components】插件写标签样式。

react写style的方法：

1、内联式

import React, { Fragment } from "react";
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
      const txtColor = {
          color: '#F00'
      }
    return (
     <Fragment>
         <h2 style={txtColor}></h2>
     </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>
         <h2 className="textColor"></h2>
     </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>
         <h2 className={classNames('textColor', {'textContent': false} ,{'textTitle': true})}></h2>
     </Fragment>
    );
  }
}
export default Style;

这种动态修改样式的方式,需要安装插件classnames.上面的代码中,h2标签的类有textColor和textTitle.项目中一般也会使用.

4、使用styled-components插件写标签样式

import React, { Fragment } from 'react'
import styled from 'styled-components'
const Title = styled.h2`
  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给h2标签设置样式,然后在组件中使用的Title就相当于写过样式的h2标签.这种方式在大项目中比较常见.

以上是“react写style的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

新闻名称：react写style的方法-创新互联
标题链接：https://www.cdcxhl.com/article2/dighoc.html

成都网站建设公司_创新互联，为您提供微信小程序、移动网站建设、自适应网站、网站排名、网站导航、定制开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联