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;
`;

你可能感兴趣的:(react如何写css?=>styled-components)