问题描述:

写了一个组件(index.tsx),引用了ant design的modal组件,

ant design修改modal的样式、修改.ant-modal-content属性

在index.less里修改modal组件的.ant-modal-content的css样式无效(给modal组件添加了update-panel对话框外部类名):

ant design修改modal的样式、修改.ant-modal-content属性

 

解决办法:

(1)通过modal的API进行设置,可以修改一部分对话框样式(此处只截取部分)

ant design修改modal的样式、修改.ant-modal-content属性

ant design修改modal的样式、修改.ant-modal-content属性

使用:

ant design修改modal的样式、修改.ant-modal-content属性

(2)上面的方法依然不能直接修改例如.ant-modal-content的样式

通过研究发现,我自己写的.ant-modal-content的css样式之所以无效,是因为组件内部less样式被上一级app.tsx的App/index.less中引入的antd默认样式覆盖了:

App/index.less:

ant design修改modal的样式、修改.ant-modal-content属性

这里只需要将新写的样式Login/index.less放到antd.less之后引入,就可以覆盖了

App/index.less:

ant design修改modal的样式、修改.ant-modal-content属性

 

(3)其他方法参考:https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme

相关文章:

  • 2021-12-29
  • 2021-06-05
  • 2022-12-23
  • 2021-11-17
  • 2022-12-23
  • 2021-12-07
  • 2022-12-23
  • 2022-01-03
猜你喜欢
  • 2021-09-18
  • 2021-08-27
  • 2021-10-28
  • 2022-12-23
  • 2022-03-01
  • 2021-11-21
  • 2021-06-08
相关资源
相似解决方案