react，引入antd mobile里的modal弹窗，按教程修改不了样式的问题

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

img


js里使用modal.confirm的代码：

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

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

img

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

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

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

img

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

img


请问代码出了什么问题？正确的代码是什么？恳请展示代码举例说明。

样式问题你打开控制台审查下元素不就行了，看下弹框父级类是不是modal，子级类是不是adm-auto-center-content，如果是的话，再看子级类的样式中有没有这个样式，有没有被别的样式覆盖

img