请问Ant design里如何设定对话框的宽度?

rockswang
  • 1.4k

Modal控件的style属性,好像只有zIndex生效,其它属性都被过滤掉了,无论怎么设置width或者padding,最终都是width: 520px; padding: 0。
如果是已知宽度,倒是可以在css里面定义ant-modal内部的ant-modal-content的宽度,把外面的容器撑大,但是如果希望运行时动态设定宽度呢?
求高人给个思路

回复
阅读 22.1k
3 个回答
✓ 已被采纳

width默认值是500,那么为什么你的设置不生效呢?
猜测你可能是在style里面设置width,但是ant已经把width单独提取出来作为一个接口使用。
直接传入width: 任意值

看一下ant的源码就知道了

export interface ModalProps {
  /** 对话框是否可见*/
  visible?: boolean;
  /** 确定按钮 loading*/
  confirmLoading?: boolean;
  /** 标题*/
  title?: React.ReactNode | string;
  /** 是否显示右上角的关闭按钮*/
  closable?: boolean;
  /** 点击确定回调*/
  onOk?: () => void;
  /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
  onCancel?: (e: React.MouseEvent<any>) => void;
  **/** 宽度*/
  width?: string | number;**
  /** 底部内容*/
  footer?: React.ReactNode;
  /** 确认按钮文字*/
  okText?: string;
  /** 取消按钮文字*/
  cancelText?: string;
  /** 点击蒙层是否允许关闭*/
  maskClosable?: boolean;
  style?: React.CSSProperties;
  wrapClassName?: string;
  maskTransitionName?: string;
  transitionName?: string;
  className?: string;
}
undefine
  • 2
新手上路,请多包涵

怎么去掉width属性,使得由内容撑开

汗,难道是老版本的文档里面没有,以前咋没发现呢

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏