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

Share Improve this question Follow asked May 19, 2021 at 8:48 Sona ShettySona Shetty 1,04744 gold badges2020 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

<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