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实现的listview效果
Apr 28 Javascript
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
JavaScript门面模式详解
Oct 19 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
微信小程序如何获取地址
Dec 24 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函数
2006/12/06 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Javascript实现的分页函数
2007/02/07 Javascript
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
js实现模糊匹配功能
2017/02/15 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python进阶之自定义可迭代的类
2019/08/20 Python
浅析python函数式编程
2020/09/26 Python
python 制作网站小说下载器
2021/02/20 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
医学专业毕业生个人的求职信
2013/12/04 职场文书
自我鉴定怎么写
2013/12/05 职场文书
商业活动邀请函
2014/02/04 职场文书
安全保证书范文
2014/04/29 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL