antd Modal弹窗设置滚动条、滚动条样式

在Ant Design（antd）的Modal组件中，如果你想要设置滚动条的样式，你可以通过CSS覆盖默认的样式。

首先，你需要确定你想要改变哪个Modal内部的滚动条样式。如果你想要改变整个页面的滚动条样式，你可以直接在全局的CSS文件中设置body或者html的滚动条样式。

/* 全局CSS文件中 */
body {
  overflow-y: scroll; /* 或者其他你想要的滚动条样式 */
  scrollbar-color: darkgrey lightgrey; /* 滚动条颜色 */
  scrollbar-width: thin; /* 滚动条宽度 */
}

如果你只想改变Modal内部的滚动条样式，你可以使用一个wrapper元素来包裹Modal的内容，并对这个wrapper应用滚动条样式。

/* 你的组件内部的CSS */
.modal-scroll-wrapper {
  overflow-y: scroll;
  scrollbar-color: darkgrey lightgrey;
  scrollbar-width: thin;
}

// 你的React组件
import React from 'react';
import { Modal } from 'antd';
import '你的CSS文件路径';
 
const YourComponent = () => {
  const [visible, setVisible] = React.useState(false);
 
  return (
    <>
      <button onClick={() => setVisible(true)}>打开Modal</button>
      <Modal
        title="Modal标题"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={null}
      >
        <div className="modal-scroll-wrapper">
          {/* Modal的内容 */}
        </div>
      </Modal>
    </>
  );
};
 
export default YourComponent;

请注意，scrollbar-color和scrollbar-width属性是非标准属性，可能不被所有浏览器支持。如果你需要更广泛的浏览器兼容性，你可能需要使用一些第三方库或者自定义滚动条的样式。