antd中,popover 不同情境下設置不同背景圖,無法設置className的情況


這次項目有一個需求,就是右上角一個 氣泡彈窗 popover ,當會員狀態是已過期的時候,背景圖成白色漸變,如果是未過期,就是黑色漸變。

於是就想通過設置不同的 status 值來添加不同的  className , 以設置  .ant-popover-inner 的樣式來設置背景圖,  當然,這樣做有一個不完美的就是不能一步到位的全部改變,需要手動更改 

.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow 來替換那個角角的值。
 
但這都不是問題!問題就在於,我給  Popover 組件設置 className ,根本不生效,F12 查看根本就沒有!  於是就各種想辦法,添加給外面,通過js找元素【react根本不吃這一套】
最后,終於被我找到了一個叫做 【 overlayClassName 】的設置className 方式!
 
辦法就是在組件上直接添加,
    <Popover overlayClassName='popUpStatus3' visible={showRenewModel} placement="bottom" content={content3} trigger="click">
                  <div className='vendor-header-icon' onClick={() => this.RenewModel()}>
                    <HomeFill className="header-home-icon" width="15px" height="15px" />
                  </div>
                </Popover>
這樣你渲染出來的就會有 class 值,就可以通過這種方式給不同狀態設置不同的背景圖啦!
 
最后,祝大家開發順利!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM