antd css - antd Modal css不加载

Question

我已经创建了一个and模式，我想将模态体颜色更改为红色，这是我的代码，已经应用了背景颜色，但它没有显示，我也想用flex对齐图像和modalName，我已经插入了and版本4.2，我使用的是样式的组件。不知道什么是wrong.please的帮助，并感谢提前。

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

`

Answer 1

不确定，但我认为您需要在您的模式中添加“bodyStyle”，以便在您的模式中添加一个背景，有点像这样

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

Answer 2

您应该将Wrapper放在模态体中，尝试如下：

    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