react如何写css?=>styled-components

image.png

在react里面,有两个通用的概念:

• 一切皆是组件
• all in js

css的样式布局,也从sass loader切换到js文件
使用styled-components

https://www.styled-components.com/

2种安装方式

• yarn add styled-components
• npm install --save styled-components
  如过npm网络不好,建议使用cnpm

---

案例

将css文件改为js

import styled from 'styled-components';

export const HeaderWrapper = styled.div`
/* 使用flex布局 */
display:flex;
flex-direction:row;
height:56px;
width:100%; 
border-bottom: 1px solid #f0f0f0;
`;