react 样式的写法之一 ---》styled-components的基本使用
【react】---styled-components的基本使用---【WangQi】
一、官网地址
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;
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:"请输入密码",
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 ...
- Vue+element-ui 重置组件样式的写法
两种方式实现element-ui组件的样式 方案1:重置的公共组件样式的写法如下 然后在main.js中引入 import '@/assets/css/element.css' 方案2:每个.vu ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- react className 有多个值时的处理 / react 样式使用 百分比(%) 报错
1.react className 有多个值时的处理 <fieldset className={`${styles.formFieldset} ${styles.formItem}`}> ...
- react 样式冲突解决方案 styled-components
前置 在 react 中解决组件样式冲突的方案中,如果您喜欢将 css 与 js 分离,可能更习惯于 CSS-Modules:如果习惯了 Vue.js 那样的单文件组件,可能习惯于使用 styled- ...
- 玩转React样式
很久很久以前,就有人用CSS来时给HTML内容添加样式.CSS可以最大限度的分离样式和内容,选择器也可以很方便的给某些元素添加样式.你根本找不到任何不用CSS的理由. 但是在React这里就是另外一回 ...
- IE样式兼容写法
1.第一种写法 利用<!--[if lt IE 6/7/8/9/10/11]><![endif]-->,给每个html写一个class <!DOCTYPE html> ...
- [React Fundamentals] Using Refs to Access Components
When you are using React components you need to be able to access specific references to individual ...
随机推荐
- Tomcat报java.io.IOException: Broken pipe错误
Tomcat报java.io.IOException: Broken pipe错误,如下图: 解决方案:我的原因是因为网络策略导致出现该问题,即网络端口未启用或被限制.
- java代码实现H5页面
public void getH5(HttpServletResponse response){ StringBuffer res=new StringBuffer(); res.append(&qu ...
- angular,,以及深度拷贝问题;JSON.parse,JSON.stringify灵活运用
问题: $scope.list = [];$scope.listTree = {};$scope.dataTree = []; //获取listTree的数据$scope.getList = func ...
- 7天玩转性能&接口测试
众所周知,近10年IT领域有两个关键的风向转变,传统IT向云计算转变,传统瀑布和迭代开发模式向敏捷开发模式转变.这两个转变促成了DevOps产品交付模式的出现.互联网行业竞争激烈,许多公司专注于产品和 ...
- 最全面的H5的背景音效素材(经过实践),分享给你!!!
个人内心独白: 这两天在为一个H5的页面寻找一些相关音效,茫茫的网络,辣么大,真是想法设法翻遍你,不说废话了,看总结吧哦 方法总结(这才是重点,看这里): 1.如果是部分铃声截取的,我们可以来到铃声之 ...
- kafka broker
在server.properties文件中配置: 1.broker.id kafka集群是由多个节点组成的,每个节点称为一个broker,中文翻译是代理.每个broker都有一个不同的brokerId ...
- luogu 5471 [NOI2019]弹跳 KDtree + Dijkstra
题目链接 第一眼就是 $KDtree$ 优化建图然而,空间只有 $128mb$,开不下 时间不吃紧,考虑直接跑 $Dijkstra$ $Dijkstra$ 中存储的是起点到每个输入时给出的矩阵的最 ...
- Dijkstra算法求最短路模板
Dijkstra算法适合求不包含负权路的最短路径,通过点增广.在稠密图中使用优化过的版本速度非常可观.本篇不介绍算法原理.只给出模板,这里给出三种模板,其中最实用的是加上了堆优化的版本 算法原理 or ...
- 动态GI
在Engine/Config 目录中找到ConsoleVariables.ini并打开,在其中加入 r.LightPropagationVolume = 1 ,保存,重启引擎 如果场景中有Post P ...
- Oracle In子句
Oracle In子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle IN运算符来确定值是否与列表或子查询中的任 ...