react，引入antd mobile里的modal弹窗，修改不了样式

在使用的react和antd mobile的版本如下：

使用modal.confirm的代码：

Modal.confirm({
            content: '登录后才能收藏房源，是否去登录?',
            closeOnMaskClick: true,
            cancelText: '取消',
            confirmText: '去登陆',
            bodyClassName: 'modal',
            onConfirm: () => {navigate('/login')}
        })

网上教程说只要在modal里面添加类名（如上面代码里的 bodyClassName: 'modal'）：

然后在css里这样写即可修改样式：

.modal .adm-auto-center-content {
  font-size: 26px;
}
.modal .adm-space-item {
  background-color: green;
}

审查元素显示添加了modal的类名，但样式内容没有显示出来：

然而，代码写完后，modal弹窗的样式仍然是默认样式，样式修改不生效：

尝试过加!important或者将其层级调高z-index:999等方法，问题依旧
请问代码出了什么问题？正确的代码是什么？请展示代码举例说明。

• 这篇博客也许可以解决你的问题👉 ：关于使用脚手架搭建react项目引入antd-mobile报错或修改主题色不失效的解决方法