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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
vue.js实现左边导航切换右边内容
Oct 21 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
js 自定义个性下拉选择框示例
2013/08/20 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
21岁生日感言
2014/02/27 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
追悼会悼词大全
2015/06/23 职场文书
公司董事任命书
2015/09/21 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫