react.js - 请问Ant design里如何设定对话框的宽度？

问题描述

问 题

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

解决方案

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;
}

这篇关于react.js - 请问Ant design里如何设定对话框的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！