如何将Ant Design Pro组件中SettingDrawer的文本/语言环境从默认中文切换为英文

I’ve dealt with this exact problem before! The SettingDrawer component from @ant-design/pro-layout uses its own locale files, so just switching the base Ant Design locale won’t cover it. Here’s how to fully switch it to English:

Step 1: Import the English Locale for Pro Layout #

First, you need to import the English locale specifically for the pro-layout components. Add this import to your file where you’re using SettingDrawer or your root app component:

import enUS from '@ant-design/pro-layout/es/locale/en_US';

Step 2: Apply the Locale #

You have two options to apply this locale:

Option A: Directly Pass to SettingDrawer #

If you’re using SettingDrawer directly, add the locale prop to override its default language:

import { SettingDrawer } from '@ant-design/pro-layout';
import enUS from '@ant-design/pro-layout/es/locale/en_US';

// ... your component code
<SettingDrawer locale={enUS} />

Option B: Global Configuration with ProConfigProvider #

For a global solution (so all pro-layout components use English automatically), wrap your app with ProConfigProvider from @ant-design/pro-layout:

import { ProConfigProvider } from '@ant-design/pro-layout';
import enUS from '@ant-design/pro-layout/es/locale/en_US';
import { ConfigProvider } from 'antd';
import antdEnUS from 'antd/es/locale/en_US';

function App() {
  return (
    <ConfigProvider locale={antdEnUS}>
      <ProConfigProvider locale={enUS}>
        {/* Your entire app content goes here */}
      </ProConfigProvider>
    </ConfigProvider>
  );
}

Critical CSS Fix #

As you noted, the official demo might fail to render correctly without the base Ant Design styles. Make sure to add this import at the top of your main app file to avoid layout issues:

import "antd/dist/antd.css";

This should replace all remaining Chinese text in the SettingDrawer with English. Let me know if you run into any unexpected issues!

内容的提问来源于stack exchange，提问作者Premchandra Singh