npm i styled-components

根本用法

import React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component {    render() {        const StyledFooter = styled.footer`            background:yellow        `        return (            <StyledFooter>                <footer>                    <ul>                        <li>首页</li>                        <li>列表</li>                        <li>我的</li>                    </ul>                </footer>            </StyledFooter>        )    }}

反对sass/less语法

import React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component {    render() {        const StyledFooter = styled.footer`        background:yellow;        position:fixed;        left:0;        bottom:0;        width:100%;        height:50px;        line-height:50px;        text-align:center;        ul{            display:flex;            list-style:none;            li{                flex:1;                &:hover{                    background:red;                }            }        }        `        return (            <StyledFooter>                <footer>                    <ul>                        <li>首页</li>                        <li>列表</li>                        <li>我的</li>                    </ul>                </footer>            </StyledFooter>        )    }}

可透传props 以及 基于props做款式判断

import React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component {    render() {        const StyledInput = styled.input`        outline:none;        border-radius:10px;        border-bottom:1px solid red;        `        const StyledDiv = styled.div`         background:${props => props.bg || 'yellow'};        `        return (            <StyledDiv bg={"lightblue"}>                Apppppp                <StyledInput type="password" ></StyledInput>            </StyledDiv>        )    }}

款式化任意组件

import React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component {    render() {        const StyledChild = styled(Child)`         background: yellow        `        return (            <div>                <StyledChild></StyledChild>            </div>        )    }}function Child(props) {//子组件记得接管    return (        <div className={props.className}>//子组件记得接管            Child        </div>    )}

css的复用、扩大、加强

mport React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component {    render() {        const StyledButton = styled.button`         width:100px;         height:100px;         background:yellow;        `        const StyledButton2 = styled(StyledButton)`        background:red;       `        return (            <div>                App                <StyledButton></StyledButton>                <StyledButton2></StyledButton2>            </div>        )    }}

增加动画 定义keyframes

import React, { Component } from 'react'import styled, { keyframes } from 'styled-components'export default class App extends Component {    render() {        const myanimation = keyframes`         from{             transform:rotate(0deg)         }         to{            transform:rotate(360deg)         }        `        const StyledDiv = styled.div`         width: 100px;         height: 100px;         background: yellow;         animation: ${myanimation} 1s infinite;        `        return (            <div>                <StyledDiv>                </StyledDiv>            </div>        )    }}