umi如何优雅地修改antd组件内部样式

在Umi框架中，优雅地修改Ant Design (antd) 组件内部样式通常通过CSS模块、主题变量（theme variables）或者高阶组件(HOC)来实现。这里简单介绍几种方法：

1. **CSS Modules**:
如果你在项目中使用了css-in-js库（如less、styled-components等），你可以直接在antd组件内导入并覆盖所需的CSS模块。例如：

   import styled from 'styled-components';
   const CustomButton = styled(antd.Button)`
     color: red;
     background-color: blue;
   `;

2. **全局主题变量（Theme）**:
Umi可以结合Ant Design的主题系统。你可以自定义`umi.config.js`中的主题，然后在需要的地方使用`ThemeProvider`包裹antd组件：

   import { ThemeProvider } from '@ant-design/theme-context';
   const App = () => (
     <ThemeProvider theme={{ ...globalTheme, button: { color: 'red', bg: 'blue' } }}>
       <Button type="primary">点击</Button>
     </ThemeProvider>
   );

3. **HOC（Higher-Order Component）**:
可以创建一个HOC函数，接收antd组件作为参数，并在其渲染前添加自定义样式：

   function customStyle(Component) {
     return ({ props }) => (
       <Component style={{ backgroundColor: 'blue', color: 'red' }}>{props.children}</Component>
     );
   }
   const CustomButton = customStyle(antd.Button);