react中使用css的7中方式(最全总结)


Posted in Javascript onFebruary 11, 2019

第一种: 在组件中直接使用style

不需要组件从外部引入css文件,直接在组件中书写。

import React, { Component } from "react";

const div1 = {
 width: "300px",
 margin: "30px auto",
 backgroundColor: "#44014C", //驼峰法
 minHeight: "200px",
 boxSizing: "border-box"
};

class Test extends Component {
 constructor(props, context) {
  super(props);
 }
 
 render() {
  return (
   <div style={div1}>123</div>
   <div style="background-color:red;">
  );
 }
}

export default Test;

注意事项:

  1. 在正常的css中,比如background-color,box-sizing等属性,在style对象div1中的属性中,必须转换成驼峰法,backgroundColor,boxSizing。而没有连字符的属性,如margin,width等,则在style对象中不变。
  2. 在正常的css中,css的值不需要用双引好(""),如
.App-header {
 background-color: #282c34;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-size: calc(10px + 2vmin);
 color: white;
}

而在react中使用style对象的方式时。值必须用双引号包裹起来。

这种方式的react样式,只作用于当前组件。

第二种: 在组件中引入[name].css文件

需要在当前组件开头使用import引入css文件。

import React, { Component } from "react";
import TestChidren from "./TestChidren";
import "@/assets/css/index.scss";

class Test extends Component {
 constructor(props, context) {
  super(props);
 }
 
 render() {
  return (
   <div>
    <div className="link-name">123</div>
    <TestChidren>测试子组件的样式</TestChidren>
   </div>

  );
 }
}

export default Test;

这种方式引入的css样式,会作用于当前组件及其所有后代组件。

第三种: 3、在组件中引入[name].scss文件

引入react内部已经支持了后缀为scss的文件,所以只需要安装node-sass即可,因为有个node-sass,scss文件才能在node环境上编译成css文件。

>yarn add node-sass

然后编写scss文件

//index.scss
.App{
 background-color: #282c34;
 .header{
  min-height: 100vh;
  color: white;
 }
}

关于如何详细的使用sass,请查看sass官网

这种方式引入的css样式,同样会作用于当前组件及其所有后代组件。

第四种: 在组件中引入[name].module.css文件

将css文件作为一个模块引入,这个模块中的所有css,只作用于当前组件。不会影响当前组件的后代组件。

import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.css";

class Test extends Component {
 constructor(props, context) {
  super(props);
 } 
 
 render() {
  return (
   <div>
    <div className={moduleCss.linkName}>321321</div>
    <TestChild></TestChild>
   </div>
  );
 }
}

export default Test;

这种方式可以看做是前面第一种在组件中使用style的升级版。完全将css和组件分离开,又不会影响其他组件。

第五种: 在组件中引入 [name].module.scss文件

类似于第四种,区别是第四种引入css module,而这种是引入 scss module而已。

import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.scss";

class Test extends Component {
 constructor(props, context) {
  super(props);
 } 
 
 render() {
  return (
   <div>
    <div className={moduleCss.linkName}>321321</div>
    <TestChild></TestChild>
   </div>
  );
 }
}

export default Test;

同样这种方式可以看做是前面第一种在组件中使用style的升级版。

第六种: 使用styled-components

需要先安装

>yarn add styled-components

然后创建一个js文件(注意是js文件,不是css文件)

//style.js
import styled, { createGlobalStyle } from "styled-components";

export const SelfLink = styled.div`
 height: 50px;
 border: 1px solid red;
 color: yellow;
`;

export const SelfButton = styled.div`
 height: 150px;
 width: 150px;
 color: ${props => props.color};
 background-image: url(${props => props.src});
 background-size: 150px 150px;
`;

组件中使用styled-components样式

import React, { Component } from "react";

import { SelfLink, SelfButton } from "./style";

class Test extends Component {
 constructor(props, context) {
  super(props);
 } 
 
 render() {
  return (
   <div>
    <SelfLink title="People's Republic of China">app.js</SelfLink>
    <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
     SelfButton
    </SelfButton>
   </div>
  );
 }
}

export default Test;

这种方式是将整个css样式,和html节点整体合并成一个组件。引入这个组件html和css都有了。
它的好处在于可以随时通过往组件上传入 属性,来动态的改变样式。对于处理变量、媒体查询、伪类等较方便的。

这种方式的css也只对当前组件有效。

具体用法,请查看styled-components官网

第七种: 使用radium

需要先安装

>yarn add radium

然后在react组件中直接引入使用

import React, { Component } from "react";
import Radium from 'radium';

let styles = {
 base: {
  color: '#fff',
  ':hover': {
   background: '#0074d9'
  }
 },
 primary: {
  background: '#0074D9'
 },
 warning: {
  background: '#FF4136'
 }
};

class Test extends Component {
 constructor(props, context) {
  super(props);
 } 
 
 render() {
  return (
   <div>
   <button style={[ styles.base, styles.primary ]}>
    this is a primary button
   </button>
   </div>
  );
 }
}

export default Radium(Test);

对于处理变量、媒体查询、伪类等是不方便的。

使用Radium可以直接处理变量、媒体查询、伪类等,并且可以直接使用js中的数学,连接,正则表达式,条件,函数等。

具体用法请查看radium官网

注意:

在export之前,必须用Radium包裹。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
jquery中post方法用法实例
Oct 21 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 #Javascript
vue自定义指令实现方法详解
Feb 11 #Javascript
Vue表情输入组件 微信face表情组件
Feb 11 #Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 #Javascript
Vue动画事件详解及过渡动画实例
Feb 09 #Javascript
JavaScript ES6常用基础知识总结
Feb 09 #Javascript
Vue组件的使用及个人理解与介绍
Feb 09 #Javascript
You might like
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php输出图像的方法实例分析
2017/02/16 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
javascript 写类方式之一
2009/07/05 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
对Python 数组的切片操作详解
2018/07/02 Python
python之消除前缀重命名的方法
2018/10/21 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Python selenium自动化测试模型图解
2020/04/15 Python
python利用opencv保存、播放视频
2020/11/02 Python
python装饰器代码深入讲解
2021/03/01 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
如何强制垃圾回收
2015/10/06 面试题
求职自荐信范文格式
2013/11/29 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
共青团员自我评价范文
2014/09/14 职场文书
情人节活动总结范文
2015/02/05 职场文书
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
V Rising 服务器搭建图文教程
2022/06/16 Servers