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


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