【React3】styled-components样式组件

styled-components可以在js中编写实际的CSS代码来设置组件的样式。它还删除了组件和样式之间的映射 - 使用组件作为低级样式构造变得更加容易！

styled-components与React（针对web）和React Native兼容

yarn add styled-components

style.js

import styled from 'styled-components';

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

image.png

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

export class Header extends Component {
    render() {
        return (
            <HeaderWrap>
                公共导航栏
            </HeaderWrap>
        )
    }
}

export default Header