使用不同尺寸的 antD Modal

Use different sizes of antD Modal

我正在使用 antD 模态来显示一个编辑器，弹出窗口 window 应该是固定大小，以防止在 collapsing/expanding 部分里面的时候改变大小。

所以我定制了：

.ant-modal-content {
max-height: 700px;
height: 700px;
width: 1000px;
/*overflow-y: auto;*/
/*overflow-x: auto;*/

}

但它正在影响其他弹出窗口！ 我尝试使用该特定模式的 style={{height: '700px', width: '1000px'}}，但它没有生效。

如何只控制一个模态框的大小？

沙盒： https://codesandbox.io/s/antd-reproduction-template-ci559?file=/index.css

（尝试更改语法文本区域的大小作为更改大小的示例）

CSS 在 index.css 文件中定义的样式是全局样式，这意味着它们会影响每个文件中的每个 element/component。

如果您想在特定 element/component 上应用某些样式，您有 2 个选项：

  1. 使用CSS Modules。它们允许您将样式限制为特定组件并重用 class 名称，而不必担心名称冲突或 css 样式影响其他组件或元素。

  2. 由于您的弹出窗口 window 是一个 div 元素，其中包含一个名为 wrapper 的 class，请在 wrapper 上应用样式 class 在 RuleEditor.css 文件中

     .wrapper {
   max-height: 400px;
 }

但请记住，如果您在其他地方使用包装 class，这些样式也会影响那些 components/elements。

你还必须防止 textarea 调整大小，否则它会溢出。为此，在 RuleEditor.js 文件中，将应用于 TextArea 组件的样式从

更改为 
style={{ width: "100%", resize: "auto" }}

到

style={{ width: "100%", resize: "none" }}