【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 React, { Component ,Fragment} from 'react';
import {GlobalStyle} from "./reset";
class App extends Component {
  render() {
    return (
      <Fragment>
        <GlobalStyle/>
      </Fragment>
    );
  }
}
export default App;
 

五、传参

 如果我们需要动态改变元素的样式,则可以通过传递参数的方式进行改变

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的基本使用的更多相关文章

  1. styled components草根中文版文档

    1.styled components官网网址 https://www.styled-components.com/docs   以组件的形式来写样式. 1.1安装 yarn add styled-c ...

  2. Vue+element-ui 重置组件样式的写法

    两种方式实现element-ui组件的样式 方案1:重置的公共组件样式的写法如下 然后在main.js中引入 import '@/assets/css/element.css'   方案2:每个.vu ...

  3. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  4. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  5. react className 有多个值时的处理 / react 样式使用 百分比(%) 报错

    1.react className 有多个值时的处理 <fieldset className={`${styles.formFieldset} ${styles.formItem}`}> ...

  6. react 样式冲突解决方案 styled-components

    前置 在 react 中解决组件样式冲突的方案中,如果您喜欢将 css 与 js 分离,可能更习惯于 CSS-Modules:如果习惯了 Vue.js 那样的单文件组件,可能习惯于使用 styled- ...

  7. 玩转React样式

    很久很久以前,就有人用CSS来时给HTML内容添加样式.CSS可以最大限度的分离样式和内容,选择器也可以很方便的给某些元素添加样式.你根本找不到任何不用CSS的理由. 但是在React这里就是另外一回 ...

  8. IE样式兼容写法

    1.第一种写法 利用<!--[if lt IE 6/7/8/9/10/11]><![endif]-->,给每个html写一个class <!DOCTYPE html> ...

  9. [React Fundamentals] Using Refs to Access Components

    When you are using React components you need to be able to access specific references to individual ...

随机推荐

  1. Tomcat报java.io.IOException: Broken pipe错误

    Tomcat报java.io.IOException: Broken pipe错误,如下图: 解决方案:我的原因是因为网络策略导致出现该问题,即网络端口未启用或被限制.

  2. java代码实现H5页面

    public void getH5(HttpServletResponse response){ StringBuffer res=new StringBuffer(); res.append(&qu ...

  3. angular,,以及深度拷贝问题;JSON.parse,JSON.stringify灵活运用

    问题: $scope.list = [];$scope.listTree = {};$scope.dataTree = []; //获取listTree的数据$scope.getList = func ...

  4. 7天玩转性能&接口测试

    众所周知,近10年IT领域有两个关键的风向转变,传统IT向云计算转变,传统瀑布和迭代开发模式向敏捷开发模式转变.这两个转变促成了DevOps产品交付模式的出现.互联网行业竞争激烈,许多公司专注于产品和 ...

  5. 最全面的H5的背景音效素材(经过实践),分享给你!!!

    个人内心独白: 这两天在为一个H5的页面寻找一些相关音效,茫茫的网络,辣么大,真是想法设法翻遍你,不说废话了,看总结吧哦 方法总结(这才是重点,看这里): 1.如果是部分铃声截取的,我们可以来到铃声之 ...

  6. kafka broker

    在server.properties文件中配置: 1.broker.id kafka集群是由多个节点组成的,每个节点称为一个broker,中文翻译是代理.每个broker都有一个不同的brokerId ...

  7. luogu 5471 [NOI2019]弹跳 KDtree + Dijkstra

    题目链接 第一眼就是 $KDtree$ 优化建图然而,空间只有 $128mb$,开不下   时间不吃紧,考虑直接跑 $Dijkstra$ $Dijkstra$ 中存储的是起点到每个输入时给出的矩阵的最 ...

  8. Dijkstra算法求最短路模板

    Dijkstra算法适合求不包含负权路的最短路径,通过点增广.在稠密图中使用优化过的版本速度非常可观.本篇不介绍算法原理.只给出模板,这里给出三种模板,其中最实用的是加上了堆优化的版本 算法原理 or ...

  9. 动态GI

    在Engine/Config 目录中找到ConsoleVariables.ini并打开,在其中加入 r.LightPropagationVolume = 1 ,保存,重启引擎 如果场景中有Post P ...

  10. Oracle In子句

    Oracle In子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle IN运算符来确定值是否与列表或子查询中的任 ...