styled-components用法

 styled-components用法

定义样式

import styled from 'styled-components';

export const HeaderWrapper = styled.div`

height:56px;

background:red;

`

组件里面使用

import { HeaderWrapper } from './style';

 <HeaderWrapper>header</HeaderWrapper>

这里的HeaderWrapper其实就是一个带有css样式的div

 

react图片引入

先通过import 引入

import logo from '../../statics/logo.png'

通过模板字符串使用

background:url(${logo});

 

设置a标签跳转

export const Logo = styled.a.attrs({href:'/'})`

或者

<Logo href='/' />