Antd Modal样式失效求助：背景色修改与Flex布局不生效

问题原因 #

1. Antd Modal默认将DOM挂载到<body>标签下，你的Wrapper样式仅作用于自身内部元素，无法影响body下的Modal节点，导致选择器无法命中目标。
2. 原CSS选择器写法错误，并列选择器（逗号分隔）不符合Modal的DOM层级关系。

解决方案一：使用Modal自带属性快速设置（推荐） #

利用Antd Modal的bodyStyle属性直接定义主体样式，同时用styled-components封装内部布局组件：

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

// 封装横向布局的组件
const StyledModalHead = styled.div`
  display: flex;
  align-items: center; /* 可选：让内容垂直居中 */
  gap: 8px; /* 可选：设置图片与文字的间距 */
`;

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

  const showModal = () => setIsModalVisible(true);
  const handleOk = () => setIsModalVisible(false);
  const handleCancel = () => setIsModalVisible(false);

  return (
    <div>
      <div className="head">hello</div>
      <Button type="primary" onClick={showModal}>Open Modal</Button>
      <Modal
        title="Basic Modal"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        // 直接设置Modal主体背景色，同时调整文字颜色避免看不清
        bodyStyle={{ backgroundColor: "red", color: "#fff" }}
      >
        <div className="modalName">hello</div>
        <StyledModalHead>
          <img src='simple.svg' className="newStyle" alt="icon" />
          <div className="modalName">beautiful</div>
        </StyledModalHead>
      </Modal>
    </div>
  );
};

export default Modall;

解决方案二：修改Modal挂载容器适配styled-components #

将Modal挂载到Wrapper内部，让样式可以作用到Modal节点：

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

const Wrapper = styled.div`
  /* 现在Modal挂载到Wrapper内部，可正确选择到Modal元素 */
  .ant-modal-content .ant-modal-body {
    background-color: red;
    color: #fff;
  }

  .modalHead {
    display: flex;
    align-items: center;
    gap: 8px;
  }
`;

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

  const showModal = () => setIsModalVisible(true);
  const handleOk = () => setIsModalVisible(false);
  const handleCancel = () => setIsModalVisible(false);

  return (
    <Wrapper ref={wrapperRef}>
      <div className="head">hello</div>
      <Button type="primary" onClick={showModal}>Open Modal</Button>
      <Modal
        title="Basic Modal"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        // 设置Modal挂载到当前Wrapper容器内
        getContainer={() => wrapperRef.current}
      >
        <div className="modalName">hello</div>
        <div className="modalHead">
          <img src='simple.svg' className="newStyle" alt="icon" />
          <div className="modalName">beautiful</div>
        </div>
      </Modal>
    </Wrapper>
  );
};

export default Modall;

内容的提问来源于stack exchange，提问作者ash