react——以 js 写样式（styled-components）

引入：

yarn add styled-components

使用：

// index.js

import React, { Component } from 'react'
import { HeaderWrapper, Logo } from './style'

class Header extends Component {
    render() {
        return (
            <HeaderWrapper>
                <Logo></Logo>
            </HeaderWrapper>
        )
    }
}

export default Header

// style.js

import styled from 'styled-components'
// 引入图片
import logo from '@/statics/logo.png'

export const HeaderWrapper = styled.div`
height:58px;
border-bottom:1px solid #f0f0f0;
`

// 设置属性
export const Logo = styled.a.attrs({
    href: '/'
})`
position:absolute;
top:0;
left:0;
display:block;
width:100px;
height:56px;
background:url(${logo});
background-size:contain;
`