Use different sizes of antD Modal

Question

I'm using antD modal to show an editor, the popup window should be fixed size to prevent size changing when collapsing/expanding sections inside.

So I customized:

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

}

but it's affecting other popups! I tried using style={{height: '700px', width: '1000px'}} of that specific modal but it didn't take affect.

How can I control the size of only one modal?

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

(try to change the size o the syntax textarea as example for changing the size)

Solution

CSS styles defined in index.css file are global styles, meaning they affect every element/component in each file.

If you want to apply some styles on a specific element/component, you have 2 options:

1. use CSS Modules. They allow you to restrict styles to specific component and reuse class names without worrying about name clashes or css styles affecting other components or element.

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

but keep in mind that if you use wrapper class somewhere else, these styles will affect those components/elements as well.

you also have to prevent textarea from resizing as well otherwise it will overflow. To do this, inside RuleEditor.js file, change the styles applied on TextArea component from

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

to

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