react项目引入antd框架方式以及遇到的一些坑

create-react-app demo //demo为项目名称

npm install -D antd

npm install babel-plugin-import --save

  "babel": {
    "plugins": [
      [
        "import",
        {
          "librayName": "antd",
          "style": true
        }
      ]
    ]
  }

@import '~antd/dist/antd.css';

import { Layout } from 'antd';
 
const { Header, Footer, Sider, Content } = Layout;
 
export default function layout(props: any) {
  return (
    <>
      <Layout>
        <Sider>Sider</Sider>
        <Layout>
          <Header>Header</Header>
          <Content>Content</Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    </>
  );
}

import { defineConfig } from 'umi';
 
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      exact: false,
      path: '/',
      component: '@/layouts/index',
      routes: [
        {
          exact: true,
          path: '/',
          component: '@/layouts/index',
        },
      ],
    },
  ],
  fastRefresh: {},
});

#root {
    height: 100%;
}

import { Layout } from 'antd';
import './index.less'
 
const { Header, Footer, Sider, Content } = Layout;
 
export default function layout(props: any) {
  return (
    <>
      <Layout className="layout-main">
        <Sider>Sider</Sider>
        <Layout>
          <Header>Header</Header>
          <Content>Content</Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    </>
  );
}

.layout-main {
  height: 100%;
}