antd css - antd Modal css is not loading-CodePudding

i have created a antd modal and i want to change modal body color to red here is my code,had applied background color but it is not showing also i want to align image and modalName in a row using flex, i have intalled antd version 4.2, and i am using styled components. dont know whats wrong.please help,and thanks in advance.

modal.js

import React , {useState}  from "react";
import { Modal ,Button} from "antd";
import styled from "styled-components";
import "antd/dist/antd.css";

const Modall = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
      setIsModalVisible(true);
    }
  
    const handleOk = () => {
      setIsModalVisible(false);
    }
  
    const handleCancel = () => {
      setIsModalVisible(false);
    }
    return (
        
            <Wrapper>
                <div className="head">hello</div>
                <Button type="primary" onClick={showModal}>
                    Open Modal
                </Button>
                <Modal
                    title="Basic Modal"
                    open={isModalVisible}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    
                >
                   <div className="modalName">hello</div>
                  <div className="modalHead">
                     <img src='simple.svg' className="newStyle"></img>
                      <div className="modalName" >beautiful</div>
                  /div>
                </Modal>            
            </Wrapper>
       
    );
}
export default Modall;



const Wrapper = styled.div`
.ant-modal, .ant-modal-content .ant-modal-body .modalHead{
display:flex;
}
.ant-modal, .ant-modal-content .ant-modal-body{
 background:red;
 }

`

CodePudding user response：

not sure but i think you need to add 'bodyStyle' in your modal to add a background to your modal , kinda like this

         <Modal
          title="Basic Modal"
          open={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
          bodyStyle={{
            backgroundColor: "red"
          }}
          
        >

CodePudding user response：

you should put Wrapper in modal body, try this:

    return (
            <>
                <div className="head">hello</div>
                <Button type="primary" onClick={showModal}>
                    Open Modal
                </Button>
                <Modal
                    title="Basic Modal"
                    open={isModalVisible}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    className="modalStyle"
                >
                  <Wrapper><div className="modalName">hello</div></Wrapper>
                </Modal>            
            </>
       
    );
    
const Wrapper = styled.div`
 background:red;
`

https://codesandbox.io/s/determined-chatelet-es5big?file=/src/App.js