React中使用外部样式的3种方式(小结)_react样式穿透资源-CSDN文库

版权申诉

159 浏览量 2020-12-02 09:25:56 上传评论收藏 58KB PDF 举报

资源推荐

资源详情

资源评论

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

一、关于一、关于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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

版权申诉

weixin_38656103

粉丝: 0
资源: 956

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip