请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

模板之家 首页 教程频道 查看内容

react怎么写style

模板之家 2020-11-27 17:45

分享至 : QQ空间
收藏

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

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;

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

相关免费学习推荐:javascript(视频)

以上就是react怎么写style的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章!


路过

雷人

握手

鲜花

鸡蛋
来自: 网络收集
文章评论0人参与
热门频道
  • ecshop微信小程序代生成服务 可选购小程序
  • 【可选购小程序】ecshop生鲜食品蔬菜水果特
  • 【可选购小程序】ecshop医药品保健药房网站
  • ecshop百货超市日用品网站 免费生成微信小
  • ecshop办公用品文具耗材设备 免费生成微信
  • 【可选购小程序】ecshop家居家纺床上用品源
  • 【可选购小程序】ecshop户外运动体育用品健
  • ecshop整站数据打包 带数据 适合申请支付、
  • ecshop跨境购海淘微信分销商城网站源码模板
  • ecshop服装服饰女装网站商城模板 oss php7
    推荐文章
  • 热门
  • 最新
返回顶部