antd4实现样式组件化

安装emotion

npm install @emotion/core @emotion/styled @emotion/react  --save

styled样式组件

styles.js

export const GreenText = styled('div')`
    color: Green;
     @media (max-width: 1280px) {
	    width: 400px;
	  }
`;

export const ConText = styled(GreenText)`
    padding: 10px;
    background: ${props => props.view ? '#fff' : '#999'};
`;

div标签内容显示为绿色

import styled from '@emotion/styled';
import {GreenText, ConText} from '../styles.js';

<GreenText>我是绿色</GreenText>

//样式组件继承与动态样式
<ConText>我是内容</ConText>

css对象样式

import { css } from "@emotion/react";

<p
  css={css`
    height: 120px;
    width: 120px;
  `}
/>