react使用ant-design的confirm弹窗Modal和别的Modal样式冲突解决方案

前言

当同一个页面使用不同的Modal，很有可能会有样式冲突。
但是只需要在Modal里加一个className,就能避免。只是如果遇到的是编程式写法的Modal呢？
其实也很简单。

import styles from './index.less'

  function showConfirm (doctorId, idOfPatient,index) {
    confirm({
      title: '请确认',
      content: '确定移除该患者吗',
      onOk () {
        deletePatient(doctorId, idOfPatient,index)
      },
      onCancel () {
        console.log('Cancel')
      },
    })
  }

像以上这段代码，就是编程式写法，我们应该怎么为它加上className呢？怎么才能使用styles 里写好的样式呢？className: {styles.custom},这样就会直接报错。
我们需要用到模板字符串，因为它是字符串的形式。

 className: `${styles.custom}`

然后在custom里做样式修改