Chakra UI Modal组件sizes对象内属性配置无效求助

你的问题出在配置结构错误：你把sizes、variants、defaultProps这些属性嵌套在了baseStyle对象内部，而Chakra UI的多组件样式配置要求这些属性必须和baseStyle处于同一层级，框架才能正确识别并应用尺寸配置。

修正后的代码如下：

import { type ComponentStyleConfig, defineStyle } from '@chakra-ui/react';
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';

const helpers = createMultiStyleConfigHelpers(['dialog', 'header', 'body']);

const Modal = helpers.defineMultiStyleConfig({
  baseStyle: {
    header: {
      pb: 0,
      fontWeight: '500',
      fontSize: '1.125rem',
      lineHeight: '1.5rem',
    },
    body: {
      color: 'black',
      lineHeight: '1.25rem',
      fontSize: '0.875rem',
      fontWeight: '400',
    },
  },
  // 将sizes移到baseStyle同级
  sizes: {
    xs: {
      dialog: {
        mt: 0,
        maxHeight: 'auto',
      },
    },
    md: {
      dialog: {
        mt: 'auto',
        backgroundColor: 'blue',
      },
    },
  },
  variants: {},
  defaultProps: {
    size: 'md',
    variant: 'solid',
  },
});

export default Modal as ComponentStyleConfig;

关键说明 #

createMultiStyleConfigHelpers生成的defineMultiStyleConfig方法，接收的配置对象结构是固定的：baseStyle、sizes、variants、defaultProps是平级的顶级属性，不能互相嵌套。之前的写法中，sizes被包裹在baseStyle里，Chakra UI无法解析这部分配置，自然不会生效。

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