在react中使用styled-components的几个简单使用方式

安装:npm install styled-components

引入:import styled from "styled-components";

1. 基本使用

 /* 创建了一个Wrapper样式组件，该组件渲染之后是一个div标签 */
  const Wrapper = styled.div`
    color: blue;
  `;
	<Wrapper >
	     <span>这是一个styled-components定义的组件</span>
	     <div>这是一个styled-components定义的组件</div>
  	</Wrapper >

2. 选择器:标签名和类名

  const Wrapper = styled.div`
    /* 应用于Wrapper组件本身和Wrapper组件里的所有html标签 */
    color: black;
    /* 应用于Wrapper组件里的h3标签 */
    h3 {
    color: red
    }
    /* 应用于Wrapper组件里的className为blue的html标签 */
    .blue {
    color: blue
    }
  `
  render(
    <Wrapper>
      <p>黑色 p 标签 </p>
      <h3>红色 h3 标签</h3> 
      <p className="blue" >蓝色 p 标签</p>
    </Wrapper>
  )

3. 选择器:伪类和伪元素

const Thing = styled.button`
    color: blue;
    ::before {
      content: '！！！';
    }
    :hover {
      color: red;
    }
  `
  render(
    <Thing>Hello world!</Thing>
  )

4. 嵌套关系:&符号表示引用主组件，注意体会加上&符号与不加的区别：

 const Thing = styled.div`
    /* 应用于className为blue的Thing组件 */
    &.blue{
    color: blue;
    }
    /* 应用于className为red的Thing组件里的所有子组件或者html标签 */
    .red {
    color: red;
    }
  `
  render(
    <React.Fragment>
      <Thing className="blue" >Thing组件</Thing>
      <Thing>
      <p className="red" >p标签</p>
      </Thing>
    </React.Fragment>
  )

5. 上下文选择符:在styled-components同样可以使用各类上下文选择符

  const Thing = styled.div`
    /* 应用于紧邻Thing组件的下一个Thing组件 */
    & + & {
    color: red;
    }
  `
  render(
    <React.Fragment>
      <Thing>第一个Thing组件</Thing>
      <Thing>第二个Thing组件</Thing>
    </React.Fragment>
  )

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

reset.js
const GlobalStyle=styled`
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;
}
`
//app.js
//将 <GlobalStyle /> 组件放在 render() 中最外层元素下面
import React, { Component ,Fragment} from 'react';
import {GlobalStyle} from "./reset";
class App extends Component {
　　render() {
　　　　return (
　　　　　　<Fragment>
　　　　　　　　<GlobalStyle/>
　　　　　　</Fragment>
　　　　);
　　}
}
export default App;

7. 如果需要动态改变样式,可以通过下面传参的方式

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

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

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

9. 修改组件内部标签;在调用组件的时候我们可以通过as来修改组件 as=“元素名称”

render(){
  return (
    <Header as="p"/>
  )  
}    
//Header组件内部渲染的时候就是用的p标签

10. 定义组件属性

export const Input = styled.input.attrs({
    value:(props)=>props.value,
    name:"input"
})`
  border:0;
  width:100px;
  height:100px;
`

11. 引入背景图片

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

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

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

const Link = ({className,children})=>(
        <a className={className}>
             {children}
         </a>   
)    
export StyleLink = styled(Link)`
  color:red  
`

13. 动画

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

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

export const StyledUl = styled.ul`
    border:1px solid #ccc;
    >li{
         border-bottom:1px solid #green;
         line-height:30px;
         padding-left:20px;      
        &>p{
            color:red
         }
    }  
`