react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】

佚名 6年前 (2019-04-11) 随笔 2009人围观抢沙发百度已收录

【react】---styled-components的基本使用---【WangQi】

一、官网地址
　　https://www.styled-components.com/

二、styled-components

　　1、styled-components 样式化组件，主要作用是它可以编写实际的CSS代码来设计组件样式，也不需要组件和样式之间的映射，即创建后就是一个正常的React 组件，并且可以附加样式给当前组件。优化react组件

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　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、使用

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第1张

export const Header = styled.div`
  width:100%;
  height:1rem;
  background:red      
`

import {Header} from "./style/index";
class App extends Component{
　　render(){
　　　　return (
　　　　　　<Header/>
　　　　)
　　}
}

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第2张

四、全局默认样式引入

引入新的API createGlobalStyle ，在下面创建一个 GlobalStyle 变量，用 createGlobalStyle 方法把全局样式包裹在其中import { createGlobalStyle } from "styled-components";export const GlobalStyle = createGlobalStyle`

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第3张

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;

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第4张

五、传参

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

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第5张

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}
`

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第6张

六、继承

　　如果我们需要继承样式的时候我们可以通过 styled(继承的组件名称)``

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第7张

const button = styled.button`
  border:0;
  width:100px;
  height:40px;
  text-align:center;
  color:#000;      
`

export const StyledButton = styled(button)`
  color:#fff;  
`

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第8张

七、修改组件内部标签

　　在调用组件的时候我们可以通过as来修改组件 as="元素名称"

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第9张

render(){
  return (
    <Header as="p"/>
  )  
}    

Header组件内部渲染的时候就是用的p标签

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第10张

八、定义组件属性

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第11张

export const Input = styled.input.attrs({
    value:"请输入密码",
    name:"input"
})`
  border:0;
  width:100px;
  height:100px;

`

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第12张

九、背景图片引入

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第13张

import logo from "./imgs/logo.png";

export const BgLogo =  styled.div`
  width:100px;
  height:200px;
  background:url(${logo}) no-repate;  
`

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第14张

十、塑造组件

　　有一种情况，一些原本就已经是组件，需要给这些组件添加样式，这时需要用到塑造组件

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第15张

import React from "react";
import styled from "styled-components";

const Link = ({className,children})=>(
        <a className={className}>
             {children}
         </a>   
)    


export StyleLink = styled(Link)`
  color:red  
`

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第16张

十一、动画

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第17张

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;

`

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第18张

十二、当标签过多时需要划分太多组件，我们可以通过以下写法来简化组件的编写

　　&代表父级

react 样式的写法之一 ---》styled-components的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第19张

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的基本使用,【react】---styled-components的基本使用---【WangQi】随笔第20张