Antd在暗黑模式下按钮有白色底边问题

如图所示今天学习react时候使用antd的Button组件,设置antd暗黑模式,按钮类型为primary,有白色的底边

原因,box-shadow阴影导致的:

解决方法:

.ant-btn {
        box-shadow: none !important;
      }

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd(Ant Design)是基于React的UI框架,它提供了一套完整的React组件。在antd中,弹窗组件(Modal)可以被用来创建模态对话框,而底部按钮则可以通过在Modal组件中添加Footer来实现。如果想要让弹窗底部按钮固定在浏览器的一定位置,需要结合CSS样式来实现。 可以使用`position: fixed;`样式将弹窗固定在浏览器的某个位置,同确保在页面滚动弹窗不会随之移动。需要注意的是,使用`position: fixed;`可能会导致弹窗内容与视口边缘重叠,因此可能需要额外的样式来调整弹窗的位置,确保它显示在期望的位置。 以下是一个简单的示例代码,展示了如何在antd的Modal组件中设置固定位置的底部按钮: ```jsx import React from 'react'; import { Modal, Button } from 'antd'; const FixedFooterModal = () => { const [visible, setVisible] = React.useState(false); const showModal = () => { setVisible(true); }; const handleOk = () => { setVisible(false); }; const handleCancel = () => { setVisible(false); }; return ( <> <Button type="primary" onClick={showModal}> Open Modal with Fixed Footer </Button> <Modal title="Fixed Footer Modal" visible={visible} onCancel={handleCancel} onOk={handleOk} footer={null} // 移除默认的底部按钮 > <div style={{ position: 'absolute', bottom: 0, width: '100%', textAlign: 'center', padding: '10px 0' }}> <Button type="primary" style={{ marginRight: '8px' }} onClick={handleOk}> 确定 </Button> <Button onClick={handleCancel}> 取消 </Button> </div> </Modal> </> ); }; export default FixedFooterModal; ``` 在这个示例中,我们将Modal的footer属性设置为null,并在Modal内部使用绝对定位来放置一个自定义的底部按钮区域。这样即使页面滚动,按钮区域也会保持在Modal的底部。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值