Is there a way to change the antD model body color using styles API? As per the documentation, model attributes can be changed using the styles attribute but the below code is changing only the footer background color.Any help would be really appreciated.

                   import { notification, Modal, Form, AutoComplete } from 'antd';
                   <Modal
                    mask={false}
                    title="Select Delivery Location"
                    style={{
                        top: 150,
                        // borderColor: '#00FF00', //changing the footer colour only
                        // backgroundColor: '#FF0000', //not working
                    }}
                    width={350}
                    onOk={this.handleOnModelSubmit}
                    visible={this.state.modal1Visible}
                    onCancel={() => this.setModal1Visible(false)}>

                    </Modal>

Is there a way to change the antD model body color using styles API? As per the documentation, model attributes can be changed using the styles attribute but the below code is changing only the footer background color.Any help would be really appreciated.

                   import { notification, Modal, Form, AutoComplete } from 'antd';
                   <Modal
                    mask={false}
                    title="Select Delivery Location"
                    style={{
                        top: 150,
                        // borderColor: '#00FF00', //changing the footer colour only
                        // backgroundColor: '#FF0000', //not working
                    }}
                    width={350}
                    onOk={this.handleOnModelSubmit}
                    visible={this.state.modal1Visible}
                    onCancel={() => this.setModal1Visible(false)}>

                    </Modal>

• javascript
• reactjs
• antd

2 Answers 2

<Modal
    bodyStyle={{
        backgroundColor: 'red'
    }}
/>

Either using 1 bracket '{' or 2 '{{'

The property used in top answer is deprecated now. You can use styles api.

<Modal 
  styles={{
    body: { backgroundColor: 'red' }, // turns the "Modal's body" to red
  }}
/>

If you want to change the color of the modal's plete background then use styles.content. As we have different property depending on if we're targeting the footer, header or body.

<Modal 
  styles={{
    content: { backgroundColor: 'red' }, // turns the Modal red
  }}
/>

See the docs here: https://ant.design/ponents/modal?locale=en-US#ponents-modal-demo-footer