使用不同大小的antD Modal

Question

我正在使用 antD 模態顯示編輯器，彈出窗口 window 應該是固定大小，以防止在內部折疊/展開部分時改變大小。

所以我定制了：

.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

（嘗試更改語法文本區域的大小作為更改大小的示例）

Answer 1

CSS styles 定義在索引中index.css文件是全局 ZBC4150D023D3255136DB671DZ61AC9 中的每個元素/組件。

如果您想在特定元素/組件上應用一些 styles，您有 2 個選項：

1. 使用CSS 模塊。 它們允許您將 styles 限制為特定組件並重用 class 名稱，而無需擔心名稱沖突或 css ZBC4150D023D3253F26 影響其他組件的其他組件。

2. As your popup window is a div element with a class named wrapper , apply the styles on wrapper class in RuleEditor.css file

    .wrapper { max-height: 400px; }

但請記住，如果您在其他地方使用包裝器 class，這些 styles 也會影響這些組件/元素。

您還必須防止textarea調整大小，否則它會溢出。 為此，在RuleEditor.js文件中，將應用於TextArea組件的 styles 從

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

至

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