React中使用外部样式的3种方式(小结)


Posted in Javascript onMay 28, 2019

一、关于css-in-js的认识

1、css-in-js是一种使用 js 编写 css 样式的 css 处理方案。它的实现方案有很多,比如styled-components、polished、glamorous(paypal 开源的,不再维护)、radium、emotion等等。

2、其中最成熟的便是styled-components和emotion。它们真正意义上实现了组件化style,可以说是专门为 react 打造的。

二、styled-components 简介

styled-components是 css-in-js 主流的实现方案,同时也是组件化style的主流实现方案。

下面是styled-components的一些特性:

1、唯一class类名:和 css-module 异曲同工,生成唯一类名,避免重复和全局污染,也不需要你费脑筋思考该如何命名。

2、无冗余css代码:它的样式和组件绑定,组件调用则样式起作用。意味着你不需要关心如何检测和删除那些未使用的 css 代码。

3、动态样式: 它可以很简单地调整和拓展组件的样式,而不需要建立很多个 class 类来维护组件的样式。

4、自动添加兼容前缀:和 Autoprefixer 类似,会自动添加浏览器兼容前缀以支持旧版浏览器。

5、支持变量和继承:你可以使用变量来设置不同的样式,使用这些不同样式时只需要给样式组件传递一个参数即可。

三、styled-components使用方式

1、安装

npm install styled-components

2、使用

styled-components主要基于 es6 的标签模板语法调用标签函数

import React, { Component } from 'react'
import styled from 'styled-components'

export default class Style extends Component {
 render() {
  return (
   <>
    <div>
     <Title>我是标题</Title>
    </div>
   </>
  )
 }
}

// 使用es6的模板字符串的方式(下面表示定义了h1的样式)
const Title = styled.h1`
 font-size: 20px;
 color: #f00;

3、嵌套的使用

import React, { Component } from 'react'
import styled from 'styled-components'

export default class Style extends Component {
 render() {
  return (
   <>
    <div>
     <Content>
      <h2>你好</h2>
      <div className="content">我是内容</div>
     </Content>
    </div>
   </>
  )
 }
}

const Content = styled.div`
 width: 100%;
 height: 500px;
 border: 1px solid #f00;
 > h2 {
  color: pink;
 }
 > .content {
  text-align: center;
  color: #f00;
 }
`

4、使用props传递参数的方式

import React, { Component } from 'react'
import styled, { css } from 'styled-components'

export default class Style2 extends Component {
 render() {
  return (
   <div>
    <Button> 提交 </Button>
    <Button primary> 提交 </Button>
   </div>
  )
 }
}

const Button = styled.button`
 font-size: 1em;
 margin: 1em;
 padding: 0.25em 1em;
 border-radius: 5px;
 color: palevioletred;
 border: 2px solid palevioletred;
 cursor: pointer;

 ${props =>
  props.primary &&
  css`
   border: 2px solid mediumseagreen;
   color: mediumseagreen;
  `}
`

5、样式的继承

import React, { Component } from 'react'
import styled from 'styled-components'

export default class Style3 extends Component {
 render() {
  return (
   <div>
    <Button> 提交 </Button>
    <ExtendingButton> 提交 </ExtendingButton>
   </div>
  )
 }
}

const Button = styled.button`
 background: palevioletred;
 color: white;
`

const ExtendingButton = styled(Button)`
 font-size: 18px;
 padding: 5px 25px;
`

四、使用sass

使用create-react-app创建的项目是支持sass的但是需要自己安装

1、安装

npm install node-sass

2、直接使用

import React, { Component } from 'react'
import './style4.scss'

export default class Style4 extends Component {
 render() {
  return (
   <div>
    <div className="title">我是标题</div>
   </div>
  )
 }
}

五、使用css-module

使用create-react-app创建的项目,默认情况下就支持css-module

1、样式文件必须以[name].module.css或[name].module.scss的形式命名

2、以变量的形式导入样式文件,比如 import styles from './style.module.css';

3、className以变量引用的方式添加,比如 className={ styles.title }

import React, { Component } from 'react'
import styles from './Style5.module.scss'

export default class Style5 extends Component {
 render() {
  return (
   <div>
    <div className={styles.title}>我是标题</div>
   </div>
  )
 }
}
<div class="Style5_title__lsl4D"></div>

4、如果不想使用默认的哈希值

:global(.wrap) {
 color: green;
}
// 直接使用
<h2 className="wrap">你好</h2>

5、样式的继承

.className {
 color: green;
 background: red;
}

.otherClassName {
 composes: className; // 直接继承上面的
 color: yellow;
}

.title {
 composes: className from './another.css'; // 直接使用外部样式表
 color: red;
}

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

Javascript 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
深入解析ES6中的promise
Nov 08 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
vue实现多条件和模糊搜索功能
May 28 #Javascript
vue实现路由切换改变title功能
May 28 #Javascript
Vue 无限滚动加载指令实现方法
May 28 #Javascript
vue实现搜索过滤效果
May 28 #Javascript
微信小程序 image组件遇到的问题
May 28 #Javascript
vue实现搜索功能
May 28 #Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
input的focus方法使用
2010/03/13 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
Linux中Python 环境软件包安装步骤
2016/03/31 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python多进程原理与用法分析
2018/08/21 Python
python爬虫之自制英汉字典
2019/06/24 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
大四自我鉴定
2014/02/08 职场文书
免职通知
2015/04/23 职场文书
小学大队长竞选稿
2015/11/20 职场文书
公证书
2019/04/17 职场文书