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 相关文章推荐
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
js arguments对象应用介绍
2012/11/28 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
名片管理系统python版
2018/01/11 Python
python绘制简单彩虹图
2018/11/19 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Python while循环使用else语句代码实例
2020/02/07 Python
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
中专生自我鉴定
2013/12/17 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
投标单位介绍信
2014/01/09 职场文书
小学新学期寄语
2014/04/02 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
房产公证书格式
2015/01/26 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS