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

[ken428965]

js里使用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弹窗的样式仍然是默认样式，样式修改不生效
请问代码出了什么问题？正确的代码是什么？恳请展示代码举例说明。

[IronKinoko]

你的写法是对的，请检查是否正确引入 css 文件。可以查看在线例子

[IronKinoko]

Modal.confirm({
   content: <div>
       提示：<br />登录后才能收藏房源，是否去登录?
   <div>,
})

你可以写 jsx 代码的

[ken428965]

刚把代码复制过去，发现vscode里的modal部分代码全变成白色，可能是因为代码所在的文件是js而不是jsx

[ken428965]

恳请告知在js里的正确写法~~~

[IronKinoko]

js 与 jsx 没有区别，看这个例子

[ken428965]

原来要加小括号~
我这边的代码是这样的：

if (!isLogin) {
      // 未登录
      return Modal.confirm({
            content: (
            <div>
              <div>提示：<div/>
              <div>登录后才能收藏房源，是否去登录?</div>
            <div/>
            ),
            // content: '登录后才能收藏房源，是否去登录?',
            closeOnMaskClick: true,
            cancelText: '取消',
            confirmText: '去登陆',
            // bodyClassName: 'modal',
            bodyClassName: styles.modal,
            onConfirm: () => {navigate('/login')}
        })
    }

可能是因为return的问题，导致改完后，vscode还是显示白色代码