feat: ConfigProvider support nextThemeEnd

.dumi/theme/layouts/GlobalLayout.tsx

@@ -150,8 +150,8 @@ const GlobalLayout: React.FC = () => {
     () => ({
       algorithm: getAlgorithm(theme),
       token: { motion: !theme.includes('motion-off') },
-      cssVar: true,
-      hashed: false,
+      cssVar: false,
+      hashed: true,
     }),
     [theme],
   );

.dumirc.ts

@@ -21,7 +21,7 @@ export default defineConfig({
       : false,
   hash: true,
   mfsu: false,
-  mako: {},
+  // mako: {},
   crossorigin: {},
   runtimePublicPath: {},
   outputPath: '_site',
@@ -57,9 +57,12 @@ export default defineConfig({
   analytics: {
     ga_v2: 'UA-72788897-1',
   },
-  analyze: process.env.NODE_ENV === 'production' ? false : {
-    analyzerPort: 'auto',
-  },
+  analyze:
+    process.env.NODE_ENV === 'production'
+      ? false
+      : {
+          analyzerPort: 'auto',
+        },
   links: [
     {
       rel: 'prefetch',

components/config-provider/context.ts

@@ -82,6 +82,12 @@ export interface ThemeConfig {
    * @default true
    */
   inherit?: boolean;
+  /**
+   * @descCN 当前 `ConfigProvider` 配置的主题是否作用截止到下一级 `ConfigProvider`。
+   * @descEN Whether to inherit the theme configured in the outer layer `ConfigProvider`.
+   * @default true
+   */
+  nextThemeEnd?: boolean;
   /**
    * @descCN 是否开启 `hashed` 属性。如果你的应用中只存在一个版本的 antd，你可以设置为 `false` 来进一步减小样式体积。
    * @descEN Whether to enable the `hashed` attribute. If there is only one version of antd in your application, you can set `false` to reduce the bundle size.
@@ -243,6 +249,7 @@ export interface ConfigConsumerProps {
   popupOverflow?: PopupOverflow;
   form?: FormConfig;
   theme?: ThemeConfig;
+  themeOrigin?: ThemeConfig;
   select?: SelectConfig;
   alert?: AlertConfig;
   anchor?: ComponentStyleConfig;

components/config-provider/demo/scope.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+scope
+
+## en-US
+
+scope

components/config-provider/demo/scope.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button, ConfigProvider } from 'antd';
+
+const App: React.FC = () => (
+  // layout
+  <ConfigProvider theme={{ token: { colorPrimary: 'red' } }}>
+    {/* page */}
+    <ConfigProvider
+      componentSize="small"
+      theme={{ nextThemeEnd: true, token: { fontSize: 12, fontSizeSM: 12 } }}
+    >
+      <Button type="primary">font-size 12</Button>
+      {/* other */}
+      <ConfigProvider componentSize="middle" theme={{ token: { colorInfo: 'blue' } }}>
+        <Button type="primary">font-size 14</Button>
+      </ConfigProvider>
+    </ConfigProvider>
+  </ConfigProvider>
+);
+
+export default App;

components/config-provider/index.en-US.md

@@ -47,6 +47,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 <code src="./demo/prefixCls.tsx" debug>prefixCls</code>
 <code src="./demo/useConfig.tsx" debug>useConfig</code>
 <code src="./demo/warning.tsx" debug>warning</code>
+<code src="./demo/scope.tsx" >scope</code>
 
 ## API
 

components/config-provider/index.tsx

@@ -177,6 +177,7 @@ export interface ConfigProviderProps {
   popupMatchSelectWidth?: boolean;
   popupOverflow?: PopupOverflow;
   theme?: ThemeConfig;
+  themeOrigin?: ThemeConfig;
   warning?: WarningContextProps;
   alert?: AlertConfig;
   anchor?: ComponentStyleConfig;
@@ -414,7 +415,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
 
   useStyle(iconPrefixCls, csp);
 
-  const mergedTheme = useTheme(theme, parentContext.theme, { prefixCls: getPrefixCls('') });
+  const mergedTheme = useTheme(parentContext.themeOrigin || theme, parentContext.theme, {
+    prefixCls: getPrefixCls(''),
+  });
 
   if (process.env.NODE_ENV !== 'production') {
     existThemeConfig = existThemeConfig || !!mergedTheme;
@@ -503,6 +506,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
 
   const config: ConfigConsumerProps = {
     ...parentContext,
+    themeOrigin: theme?.nextThemeEnd ? parentContext.theme : undefined,
   };
 
   (Object.keys(baseConfig) as (keyof typeof baseConfig)[]).forEach((key) => {
@@ -629,7 +633,6 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     return {
       ...rest,
       theme: themeObj,
-
       token: mergedToken,
       components: parsedComponents,
       override: {

components/config-provider/index.zh-CN.md

@@ -48,6 +48,7 @@ export default Demo;
 <code src="./demo/prefixCls.tsx" debug>前缀</code>
 <code src="./demo/useConfig.tsx" debug>获取配置</code>
 <code src="./demo/warning.tsx" debug>警告</code>
+<code src="./demo/scope.tsx" >scope</code>
 
 ## API