diff --git a/components/alert/index.tsx b/components/alert/Alert.tsx
similarity index 96%
rename from components/alert/index.tsx
rename to components/alert/Alert.tsx
index 60b7c0fcd7..f3ca2aa14e 100644
--- a/components/alert/index.tsx
+++ b/components/alert/Alert.tsx
@@ -11,7 +11,6 @@ import * as React from 'react';
 import { replaceElement } from '../_util/reactNode';
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
-import ErrorBoundary from './ErrorBoundary';
 
 // CSSINJS
 import useStyle from './style';
@@ -97,11 +96,7 @@ const CloseIcon: React.FC<CloseIconProps> = (props) => {
   ) : null;
 };
 
-type CompoundedComponent = React.FC<AlertProps> & {
-  ErrorBoundary: typeof ErrorBoundary;
-};
-
-const Alert: CompoundedComponent = ({
+const Alert: React.FC<AlertProps> = ({
   description,
   prefixCls: customizePrefixCls,
   message,
@@ -227,8 +222,6 @@ const Alert: CompoundedComponent = ({
   );
 };
 
-Alert.ErrorBoundary = ErrorBoundary;
-
 if (process.env.NODE_ENV !== 'production') {
   Alert.displayName = 'Alert';
 }
diff --git a/components/alert/ErrorBoundary.tsx b/components/alert/ErrorBoundary.tsx
index 86861d011e..8c8b6b2bd9 100644
--- a/components/alert/ErrorBoundary.tsx
+++ b/components/alert/ErrorBoundary.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Alert from '.';
+import Alert from './Alert';
 
 interface ErrorBoundaryProps {
   message?: React.ReactNode;
diff --git a/components/alert/index.ts b/components/alert/index.ts
new file mode 100644
index 0000000000..5bb8dd2dbe
--- /dev/null
+++ b/components/alert/index.ts
@@ -0,0 +1,15 @@
+import type { AlertProps } from './Alert';
+import InternalAlert from './Alert';
+import ErrorBoundary from './ErrorBoundary';
+
+export type { AlertProps } from './Alert';
+
+type CompoundedComponent = React.FC<AlertProps> & {
+  ErrorBoundary: typeof ErrorBoundary;
+};
+
+const Alert = InternalAlert as CompoundedComponent;
+
+Alert.ErrorBoundary = ErrorBoundary;
+
+export default Alert;
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index f35c41b25a..3d17f5c0e2 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -6,7 +6,7 @@ import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import { FormItemInputContext } from '../form/context';
-import { GroupContext } from './Group';
+import GroupContext from './GroupContext';
 
 import useStyle from './style';
 
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index ac05a83867..f62dc19268 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { CheckboxChangeEvent } from './Checkbox';
 import Checkbox from './Checkbox';
+import GroupContext from './GroupContext';
 
 import useStyle from './style';
 
@@ -35,17 +36,6 @@ export interface CheckboxGroupProps extends AbstractCheckboxGroupProps {
   children?: React.ReactNode;
 }
 
-export interface CheckboxGroupContext {
-  name?: string;
-  toggleOption?: (option: CheckboxOptionType) => void;
-  value?: any;
-  disabled?: boolean;
-  registerValue: (val: string) => void;
-  cancelValue: (val: string) => void;
-}
-
-export const GroupContext = React.createContext<CheckboxGroupContext | null>(null);
-
 const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGroupProps> = (
   {
     defaultValue,
@@ -166,6 +156,9 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
   );
 };
 
+export type { CheckboxGroupContext } from './GroupContext';
+export { GroupContext };
+
 const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(InternalCheckboxGroup);
 
 export default React.memo(CheckboxGroup);
diff --git a/components/checkbox/GroupContext.ts b/components/checkbox/GroupContext.ts
new file mode 100644
index 0000000000..896ee5c9f8
--- /dev/null
+++ b/components/checkbox/GroupContext.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+import type { CheckboxOptionType } from './Group';
+
+export interface CheckboxGroupContext {
+  name?: string;
+  toggleOption?: (option: CheckboxOptionType) => void;
+  value?: any;
+  disabled?: boolean;
+  registerValue: (val: string) => void;
+  cancelValue: (val: string) => void;
+}
+
+const GroupContext = React.createContext<CheckboxGroupContext | null>(null);
+
+export default GroupContext;
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index a6fe1c8878..5ad263e3ec 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -5,6 +5,7 @@ import Divider from '../../divider';
 import Segmented from '../../segmented';
 import Space from '../../space';
 import Spin from '../../spin';
+import Steps from '../../steps';
 import Typography from '../../typography';
 
 describe('ConfigProvider support style and className props', () => {
@@ -149,4 +150,17 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('config-provider-segmented');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('Should Steps className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        steps={{ className: 'config-provider-steps', style: { backgroundColor: 'red' } }}
+      >
+        <Steps items={[{ title: 'title', description: 'description' }]} />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-steps');
+    expect(element).toHaveClass('config-provider-steps');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 0dca7f8aeb..298c044ce5 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -101,6 +101,10 @@ export interface ConfigConsumerProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  steps?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 0316937549..c6981e4323 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -109,6 +109,7 @@ const {
 | select | Set Select common props | { showSearch?: boolean } | - |  |
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 1a670f7603..d6b880ddb4 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -150,6 +150,10 @@ export interface ConfigProviderProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  steps?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -241,6 +245,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     spin,
     typography,
     divider,
+    steps,
   } = props;
 
   // =================================== Warning ===================================
@@ -296,6 +301,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     spin,
     typography,
     divider,
+    steps,
   };
 
   const config = {
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index b11645c32b..2150149494 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -111,6 +111,7 @@ const {
 | select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - |  |
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ
diff --git a/components/descriptions/DescriptionsContext.ts b/components/descriptions/DescriptionsContext.ts
new file mode 100644
index 0000000000..fdff05b6be
--- /dev/null
+++ b/components/descriptions/DescriptionsContext.ts
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export interface DescriptionsContextProps {
+  labelStyle?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
+}
+
+const DescriptionsContext = React.createContext<DescriptionsContextProps>({});
+
+export default DescriptionsContext;
diff --git a/components/descriptions/Row.tsx b/components/descriptions/Row.tsx
index 28ac218ece..230925993d 100644
--- a/components/descriptions/Row.tsx
+++ b/components/descriptions/Row.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { DescriptionsContextProps } from '.';
-import { DescriptionsContext } from '.';
 import Cell from './Cell';
+import type { DescriptionsContextProps } from './DescriptionsContext';
+import DescriptionsContext from './DescriptionsContext';
 import type { DescriptionsItemProps } from './Item';
 
 interface CellConfig {
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
index 2b5445e8db..fcca116429 100644
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@@ -8,17 +8,11 @@ import useResponsiveObserver, { responsiveArray } from '../_util/responsiveObser
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import useSize from '../config-provider/hooks/useSize';
+import DescriptionsContext from './DescriptionsContext';
 import DescriptionsItem from './Item';
 import Row from './Row';
 import useStyle from './style';
 
-export interface DescriptionsContextProps {
-  labelStyle?: React.CSSProperties;
-  contentStyle?: React.CSSProperties;
-}
-
-export const DescriptionsContext = React.createContext<DescriptionsContextProps>({});
-
 const DEFAULT_COLUMN_MAP: Record<Breakpoint, number> = {
   xxl: 3,
   xl: 3,
@@ -213,6 +207,9 @@ if (process.env.NODE_ENV !== 'production') {
   Descriptions.displayName = 'Descriptions';
 }
 
+export type { DescriptionsContextProps } from './DescriptionsContext';
+export { DescriptionsContext };
+
 Descriptions.Item = DescriptionsItem;
 
 export default Descriptions;
diff --git a/components/segmented/index.tsx b/components/segmented/index.tsx
index f292175425..e607be06f1 100644
--- a/components/segmented/index.tsx
+++ b/components/segmented/index.tsx
@@ -95,13 +95,13 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
     hashId,
   );
 
-  const mergeStyle: React.CSSProperties = { ...segmented?.style, ...style };
+  const mergedStyle: React.CSSProperties = { ...segmented?.style, ...style };
 
   return wrapSSR(
     <RcSegmented
       {...restProps}
       className={cls}
-      style={mergeStyle}
+      style={mergedStyle}
       options={extendedOptions}
       ref={ref}
       prefixCls={prefixCls}
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index cf0fb4a5ee..93d148dd3b 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -137,12 +137,12 @@ const Spin: React.FC<SpinClassProps> = (props) => {
   // fix https://fb.me/react-unknown-prop
   const divProps = omit(restProps, ['indicator', 'prefixCls']);
 
-  const mergeStyle: React.CSSProperties = { ...spin?.style, ...style };
+  const mergedStyle: React.CSSProperties = { ...spin?.style, ...style };
 
   const spinElement: React.ReactNode = (
     <div
       {...divProps}
-      style={mergeStyle}
+      style={mergedStyle}
       className={spinClassName}
       aria-live="polite"
       aria-busy={spinning}
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index 6066060eab..62f165604e 100644
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@@ -64,10 +64,11 @@ const Steps: CompoundedComponent = (props) => {
     responsive = true,
     current = 0,
     children,
+    style,
     ...restProps
   } = props;
   const { xs } = useBreakpoint(responsive);
-  const { getPrefixCls, direction: rtlDirection } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction: rtlDirection, steps } = React.useContext(ConfigContext);
 
   const realDirectionValue = React.useMemo<RcStepsProps['direction']>(
     () => (responsive && xs ? 'vertical' : direction),
@@ -85,7 +86,10 @@ const Steps: CompoundedComponent = (props) => {
   const mergedItems = useLegacyItems(items, children);
   const mergedPercent = isInline ? undefined : percent;
 
+  const mergedStyle: React.CSSProperties = { ...steps?.style, ...style };
+
   const stepsClassName = classNames(
+    steps?.className,
     {
       [`${prefixCls}-rtl`]: rtlDirection === 'rtl',
       [`${prefixCls}-with-progress`]: mergedPercent !== undefined,
@@ -127,6 +131,7 @@ const Steps: CompoundedComponent = (props) => {
     <RcSteps
       icons={icons}
       {...restProps}
+      style={mergedStyle}
       current={current}
       size={size}
       items={mergedItems}
diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
index 7c7358a3a0..3532ecbf30 100644
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -1,34 +1,34 @@
 import FilterFilled from '@ant-design/icons/FilterFilled';
 import classNames from 'classnames';
-import isEqual from 'rc-util/lib/isEqual';
 import type { FieldDataNode } from 'rc-tree';
+import isEqual from 'rc-util/lib/isEqual';
 import * as React from 'react';
-import type { MenuProps } from '../../../menu';
 import type { FilterState } from '.';
-import { flattenKeys } from '.';
+import useSyncState from '../../../_util/hooks/useSyncState';
+import warning from '../../../_util/warning';
 import Button from '../../../button';
 import type { CheckboxChangeEvent } from '../../../checkbox';
 import Checkbox from '../../../checkbox';
 import { ConfigContext } from '../../../config-provider/context';
 import Dropdown from '../../../dropdown';
 import Empty from '../../../empty';
+import type { MenuProps } from '../../../menu';
 import Menu from '../../../menu';
 import { OverrideProvider } from '../../../menu/OverrideContext';
 import Radio from '../../../radio';
 import type { EventDataNode } from '../../../tree';
 import Tree from '../../../tree';
-import useSyncState from '../../../_util/hooks/useSyncState';
 import type {
   ColumnFilterItem,
   ColumnType,
   FilterSearchType,
+  FilterValue,
   GetPopupContainer,
   Key,
   TableLocale,
 } from '../../interface';
 import FilterSearch from './FilterSearch';
 import FilterDropdownMenuWrapper from './FilterWrapper';
-import warning from '../../../_util/warning';
 
 type FilterTreeDataNode = FieldDataNode<{ title: React.ReactNode; key: React.Key }>;
 
@@ -37,6 +37,17 @@ interface FilterRestProps {
   closeDropdown?: Boolean;
 }
 
+export function flattenKeys(filters?: ColumnFilterItem[]) {
+  let keys: FilterValue = [];
+  (filters || []).forEach(({ value, children }) => {
+    keys.push(value);
+    if (children) {
+      keys = [...keys, ...flattenKeys(children)];
+    }
+  });
+  return keys;
+}
+
 function hasSubMenu(filters: ColumnFilterItem[]) {
   return filters.some(({ children }) => children);
 }
diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx
index ae58ffe464..c721916fe2 100644
--- a/components/table/hooks/useFilter/index.tsx
+++ b/components/table/hooks/useFilter/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import warning from '../../../_util/warning';
 import type {
-  ColumnFilterItem,
   ColumnsType,
   ColumnTitleProps,
   ColumnType,
@@ -13,7 +12,7 @@ import type {
   TransformColumns,
 } from '../../interface';
 import { getColumnKey, getColumnPos, renderColumnTitle } from '../../util';
-import FilterDropdown from './FilterDropdown';
+import FilterDropdown, { flattenKeys } from './FilterDropdown';
 
 export interface FilterState<RecordType> {
   column: ColumnType<RecordType>;
@@ -129,17 +128,6 @@ function injectFilter<RecordType>(
   });
 }
 
-export function flattenKeys(filters?: ColumnFilterItem[]) {
-  let keys: FilterValue = [];
-  (filters || []).forEach(({ value, children }) => {
-    keys.push(value);
-    if (children) {
-      keys = [...keys, ...flattenKeys(children)];
-    }
-  });
-  return keys;
-}
-
 function generateFilterInfo<RecordType>(filterStates: FilterState<RecordType>[]) {
   const currentFilters: Record<string, FilterValue | null> = {};
 
@@ -292,4 +280,6 @@ function useFilter<RecordType>({
   return [transformColumns, mergedFilterStates, filters];
 }
 
+export { flattenKeys };
+
 export default useFilter;
diff --git a/package.json b/package.json
index baaf454368..98897d35e7 100644
--- a/package.json
+++ b/package.json
@@ -148,7 +148,7 @@
     "rc-switch": "~4.1.0",
     "rc-table": "~7.32.1",
     "rc-tabs": "~12.8.1",
-    "rc-textarea": "~1.3.0",
+    "rc-textarea": "~1.3.2",
     "rc-tooltip": "~6.0.0",
     "rc-tree": "~5.7.4",
     "rc-tree-select": "~5.9.0",