chore(config-provider): support dynamic prefixCls (#30625)

components/config-provider/__tests__/index.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { mount } from 'enzyme';
 import { SmileOutlined } from '@ant-design/icons';
 import ConfigProvider, { ConfigContext } from '..';
@@ -57,6 +57,30 @@ describe('ConfigProvider', () => {
     expect(wrapper.find('button').props().className).toEqual('bamboo-btn');
   });
 
+  it('dynamic prefixCls', () => {
+    const DynamicPrefixCls = () => {
+      const [prefixCls, setPrefixCls] = useState('bamboo');
+      return (
+        <div>
+          <Button onClick={() => setPrefixCls('light')} className="toggle-button">
+            toggle
+          </Button>
+          <ConfigProvider prefixCls={prefixCls}>
+            <ConfigProvider>
+              <Button />
+            </ConfigProvider>
+          </ConfigProvider>
+        </div>
+      );
+    };
+
+    const wrapper = mount(<DynamicPrefixCls />);
+
+    expect(wrapper.find('button').last().props().className).toEqual('bamboo-btn');
+    wrapper.find('.toggle-button').first().simulate('click');
+    expect(wrapper.find('button').last().props().className).toEqual('light-btn');
+  });
+
   it('iconPrefixCls', () => {
     const wrapper = mount(
       <ConfigProvider iconPrefixCls="bamboo">

components/config-provider/demo/prefixCls.md

@@ -15,18 +15,29 @@ debug: true
 Config component and icon prefixCls.
 
 ```jsx
-import { ConfigProvider, Select } from 'antd';
+import { ConfigProvider, Select, Button } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
 
 // Ant Design site use `es` module for view
 // but do not replace related lib `lib` with `es`
 // which do not show correct in site.
 // We may need do convert in site also.
-const FormSizeDemo = () => (
+const FormSizeDemo = () => {
-  <ConfigProvider prefixCls="light" iconPrefixCls="bamboo">
+  const [prefixCls, setPrefixCls] = useState('light');
+  return (
+    <div>
+      <Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
+        toggle prefixCls
+      </Button>
+      <div>
+        <ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
           <SmileOutlined />
           <Select />
         </ConfigProvider>
-);
+      </div>
+    </div>
+  );
+};
 ReactDOM.render(<FormSizeDemo />, mountNode);
 ```

components/config-provider/index.tsx

@@ -149,7 +149,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
 
       return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
     },
-    [parentContext.getPrefixCls],
+    [parentContext.getPrefixCls, props.prefixCls],
   );
 
   const config = {