安装
yarn add styled-components
全局样式
reset.js文件
import {createGlobalStyle} from 'styled-components';
export const GlobalStyled = createGlobalStyle`
body{
margin:0;
padding:0;
background:red;
}`
app.js文件
import React from 'react';
import {GlobalStyled} from './style.js';
class App extends React.Components{
render(){
return(
<div className='App'>
<GlobalStyled />
</div>
)
}
}
单个组件样式
style.js文件
import styled from 'styled-components';
export const HeaderWrapper = styled.div`
height:100px;
background:orange;
`
header.js页面组件
import React,{Component} from 'react';
import {HeaderWrapper} from './style.js';
class Header extends Component{
render(){
return (
<HeaderWrapper></HeaderWrapper>
)
}
}
export default Header;