atnd 開發遇到的一些自定義樣式問題modal,table

自定義修改不同組件顔色：

：global(className){}
這個設置是全局生效如果不想讓全局生效就寫在div塊裏面
复制代码

modal底部按鈕自定義：

  <Modal title="標題"  
  visible={visible} 
  confirmLoading={confirmLoading}  
  onCancel={this.handleCancel} 
  footer={  [
  <Button  key="back"  onClick={handleCancel}> 返回 </Button>,
  <Button key="submit" type="primary" onClick={handleOk}> 儲存</Button>
  ] } 
  >
  </Modal>
复制代码

segmented切換的時候閃白：

主要是因爲有一個div顔色是白色沒有改變所以切換的時候會閃一秒時間的白看著很難看，主要改這個class .ant-segmented-thumb

:global(.ant-segmented-thumb){
background: #489C9C !important;
}
:global(.ant-segmented-item-selected){
background: #489C9C !important;
}
复制代码

table 表格每行自定義顔色： 在columns中添加一個

    onCell: sharedOnCell，
    
const sharedOnCell = (item, index) => { 
    if(item.age ===32 && index === 0){
        return {
            className:style['green_color']
           }
   }
    if(item.age ===32 && index === 2){
        return {
            className:style['red_color']
        }
    }
    if(item.age ===42 && index === 1){
        return {
            className:style['blue_color']
        }
    }
    if(item.tel ==='0575-22098909' && index === 2){
        return {
            className:style['yellow_color']
        }
    }

    if (index === 4) {
      return {
        colSpan: 0,
      };
    }


return {};
复制代码

};

table 依靠colums去渲染tag:

       render: (text, record, index) =>  
        {   
         let color = 'volcano';
          if(text === 18){
            color = 'green'
          } 
          return  (
            <Tag color={color} key={nanoid()}> 
            <a href="#" onClick={()=>otherPage(index)}>跳轉</a>
            {
              text
            }
            </Tag>
          )
        } 
复制代码

模擬效果圖 ：

另外我還有遇到一個問題暫時沒有解決：在開發的時候有時候modal或者其他的組件一部分樣式突然失效變成慘白色，連我設置的atnd主題都不再生效，之後看起他的組件樣式卻沒有變化，只有那一個突然失效，我再打開其他的modal幾次那個失效的顔色就又變回正常，我搞不清楚這個是什麽問題，網上也沒有見過這種，有人見過類似的可以給我講講麽，萬分感謝！

作者：夢行者
链接：https://juejin.cn/post/7159018759749894175
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。