问题描述:如何在react中使用antd中的Modal弹框,并且修改弹框的样式?
1.首先在src文件夹下创建styles文件夹 styles/golbal.ts2.打开index.tsx3.在使用Modal的组件,这里是List/index.tsx相信很多人都使用过antd,首先antd中的Modal对话框在react中是无法直接选中的,需要在最外层写,它比较特殊,如果你想修改其他的,比如button的样式,直接选中它的样式就可以修改,二Modal不可以,下面来具体说明如何配置才可以选中弹框的样式
1.首先在src文件夹下创建styles文件夹 styles/golbal.ts
//引入图片import mask from '@/img/mask.png'import { createGlobalStyle } from '@tripod-visualization/styled';export const GlobalStyle = createGlobalStyle` .initIate {}.newBuilt {}`;
2.打开index.tsx
import { GlobalStyle } from '@tripod-visualization/styled';import { GlobalStyle as OwnGlobalStyle } from '@/styles/global';ReactDOM.createRoot(root).render(<React.Suspense fallback={'加载中...'}><BrowserRouter basename={__DEV__ ? '' : PROJECT_NAME}><GlobalStyle /> //使用引入的组件<OwnGlobalStyle /><App /></BrowserRouter></React.Suspense>,);
3.在使用Modal的组件,这里是List/index.tsx
//给一个className类名,在styles文件夹里面的css中选中它<Modalopen={isModalOpen}onOk={handleOkInitiate}onCancel={handleCancelInitiate}okText={'确定'}cancelText={'取消'}className="initIate"><p>是否启用该模块</p></Modal>
总结: 最后呢,你的样式就可以自定义修改这个弹框了,也有可能会遇到你给了样式还是看不到的情况,这个时候呢可以去找它内部的样式,看一下它内部的样式在哪个类上面。比如说font-size在 .ant-modal-body上面。不同的css是在不同的类上面的。
喜欢的小伙伴点点赞~~~~~~~~