自定義修改不同組件顔色:
: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
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。