【react】---styled-components的基本使用---【巷子】
一、官网地址
https://www.styled-components.com/
二、styled-components
1、styled-components 样式化组件,主要作用是它可以编写实际的CSS代码来设计组件样式,也不需要组件和样式之间的映射,即创建后就是一个正常的React 组件,并且可以附加样式给当前组件。 优化react组件
2、在一个组件内会将结构、样式和逻辑写在一起,虽然这违背了关注点分离的原则,但是这有利于组件间的隔离。为了顺应组件化的潮流
3、使用styled-components不需要再使用className属性来控制样式,而是将样式写成更具语义化的组件的形式
4、使用style-components会随机生成一个class名称,这样不会污染到全局变量,当然因为随机生成,维护会增加难度
三、基本使用
1、安装
cnpm i styled-components -S || yarn add styled-components
2、引入
import styled from "styled-components";
3、使用
export const Header = styled.div`
width:100%;
height:1rem;
background:red
` import {Header} from "./style/index";
class App extends Component{
render(){
return (
<Header/>
)
}
}
四、全局默认样式引入
引入新的API createGlobalStyle ,在下面创建一个 GlobalStyle 变量,用 createGlobalStyle 方法把全局样式包裹在其中import { createGlobalStyle } from "styled-components";export const GlobalStyle = createGlobalStyle`
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, c{ border:none; } img{display: block;} address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; } ul, ol ,li{ list-style:none; } body { color:#333; font:12px BASE "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;} a { color:#666; text-decoration:none; } *{box-sizing:border-box}
body,html,#root{
height: 100%;
overflow: hidden;
}
` //将 <GlobalStyle /> 组件放在 render() 中最外层元素下面
五、传参
如果我们需要动态改变元素的样式,则可以通过传递参数的方式进行改变
import {Header} from "style/index.js" render(){
return (
<Header bgColor="red"/>
)
} style/index.js import styled from "styled-components";
export const Header = styled.div`
width:100px;
height:200px;
background-color:${props=>props.bgColor}
`
六、继承
如果我们需要继承样式的时候我们可以通过 styled(继承的组件名称)``
const button = styled.button`
border:0;
width:100px;
height:40px;
text-align:center;
color:#000;
` export const StyledButton = styled(button)`
color:#fff;
`
七、修改组件内部标签
在调用组件的时候我们可以通过as来修改组件 as="元素名称"
render(){
return (
<Header as="p"/>
)
} Header组件内部渲染的时候就是用的p标签
八、定义组件属性
export const Input = styled.input.attrs({
value:(props)=>props.value,
name:"input"
})`
border:0;
width:100px;
height:100px; `
九、背景图片引入
import logo from "./imgs/logo.png"; export const BgLogo = styled.div`
width:100px;
height:200px;
background:url(${logo}) no-repate;
`
十、塑造组件
有一种情况,一些原本就已经是组件,需要给这些组件添加样式,这时需要用到塑造组件
import React from "react";
import styled from "styled-components"; const Link = ({className,children})=>(
<a className={className}>
{children}
</a>
) export StyleLink = styled(Link)`
color:red
`
十一、动画
const move = keyframes`
0%{
transform:rotate(0%);
} 100%{
transform :rotate(100%); }
` export const TransFormDiv = styled.div`
width:100px;
height:100px;
background:red;
animation:${move} 2s; `
十二、当标签过多时需要划分太多组件,我们可以通过以下写法来简化组件的编写
&代表父级
export const StyledUl = styled.ul`
border:1px solid #ccc;
>li{
border-bottom:1px solid #green;
line-height:30px;
padding-left:20px;
&>p{
color:red }
} `
【react】---styled-components的基本使用---【巷子】的更多相关文章
- styled components草根中文版文档
1.styled components官网网址 https://www.styled-components.com/docs 以组件的形式来写样式. 1.1安装 yarn add styled-c ...
- React & styled component
React & styled component https://www.styled-components.com/#your-first-styled-component tagged t ...
- [React] Use React.ReactNode for the children prop in React TypeScript components and Render Props
Because @types/react has to expose all its internal types, there can be a lot of confusion over how ...
- (翻译)React Container Components
原文:Container Components Container Components 在 React 模式上对我的代码有最深远影响的一个模式叫 container component 模式. 在 ...
- React组件Components的两种表示方式
函数式的表示: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Class式的表示: clas ...
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
- 推荐 9 个样式化组件的 React UI 库
简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...
- The Road to learn React书籍学习笔记(第一章)
react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...
- Angular Vue React 框架中的 CSS
框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...
- (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去
原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...
随机推荐
- 1分钟试用PowerShell 5.0新功能PowerShellGet安装Script Browser和Script Analyzer
微软PowerShell 产品组上周发布了PowerShell 5.0 PowerShellGet功能.有了它,IT 人员可以方便地搜索,安装,更新PowerShell Module.在这篇博客中,我 ...
- 【PMP】挣值分析
挣值分析(EVA):将实际进度和成本绩效与绩效测量基准进行比较. 1.名词解释 1.1 三个指标 PV [Plan value] 计划价值 官方释义:为计划工作分配的经批准的预算,它是为完成某活动或 ...
- Rplidar学习(五)—— rplidar使用cartographer_ros进行地图云生成
一.Cartographer简介 Cartographer是google开源的通用2D和3D定位与地图同步构建的SLAM工具,并提供ROS接口.官网地址:https://github.com/goog ...
- 使用EF操作不同数据库(以SQLite为例)
最近一直在和数据库作对. 从安卓平台上给了我个SQLite数据库,要求程序能够读取不同的文件.由于字段实在太多,不愿意直接使用原来直接读取datatable的方式来做,手动写映射太痛苦...于是想起来 ...
- linux内核剖析(零)linux系统启动过程详解-开机加电后发生了什么
本文参考了如下文章 深入理解linux启动过程 mbr (主引导记录(Master Boot Record)) 电脑从开机加电到操作系统main函数之前执行的过程 详解linux系统的启动过程及系统初 ...
- 多分类-- ROC曲线
本文主要介绍一下多分类下的ROC曲线绘制和AUC计算,并以鸢尾花数据为例,简单用python进行一下说明.如果对ROC和AUC二分类下的概念不是很了解,可以先参考下这篇文章:http://blog.c ...
- 并发和多线程-说说面试长提平时少用的volatile
说到volatile,一些参加过面试的同学对此肯定不陌生. 它是面试官口中的常客,但是平时的编码却很少打照面(起码,我是这样的). 最近的面试,我也经常会问到volatile相关的问题,比如volat ...
- 图文剖析自己定义View的绘制(以自己定义滑动button为例)
自己定义View一直是横在Android开发人员面前的一道坎. 一.View和ViewGroup的关系 从View和ViewGroup的关系来看.ViewGroup继承View. View的子类.多是 ...
- 用pigz代替gzip -- 并行压缩软件
用pigz代替gzip By yejr on 03 十二月 2012 pig是个啥东东?官网:http://zlib.net/pigz一句话简介: A parallel implementation ...
- 菜鸟教程之工具使用(八)——EGit禁止自动转换回车换行符
众所周知,Windows和Linux系统的回车换行是不一样的.想要进一步了解它们的可以阅读下面的介绍,不感兴趣的可以直接跳过. 产生背景 关于“回车”(carriage return)和“换行”(li ...