react 仿 antd 風格的季度選擇元件

產品也真是夠了，周選擇、月份選擇、年份選擇都是 antd 直接支援的，然而他現在要求要季度選擇和半年份的選擇。

那就來實現乙個仿 antd 風格的季度選擇元件吧，本文部分參照-真的想不出來-模仿 antd 寫乙個季度的時間選擇器 v1.0

我實現了複製可用的版本。

功能：

startdatachange(data: any) );

}

補充了 ts 的一些型別說明，並且將 componentwillreceiveprops(nextprops, prevstate) 替換為 static getderivedstatefromprops(nextprops, prevstate)，因為前者即將被 react 廢棄。

import react,  from 'react';

import moment from 'moment';
import './index.less';
type iprops = ;
type istate = ;
const quarterdata = [, , , ];
const _defaultprops = -$`,
open: undefined,
onok: () => {},
classname: ""
}class quarterpicker extends component-$`, // 選中的時間， "2020-1"， "-1" 代表第一季度
selectiontime: "", // 點確定後需要返回的時間
onedisplay: "block",
twodisplay: "block"
}this.togglecontainer = react.createref()
}  componentdidmount()  = this.props;
let  = this.state;
year = value ? value.split("-")[0] : selecttime.split("-")[0]
this.setstate()
this.idblock(year)
if (open === undefined) 
}  componentwillunmount() 
// componentwillreceiveprops 被廢棄，使用 getderivedstatefromprops 來取代
static getderivedstatefromprops(nextprops: iprops, prevstate: istate)  = nextprops;
if (value !== prevstate.selectiontime) ;
}// 不需要更新狀態，返回null
return null;
}  onclick = (ev: any) => )
}  handleclickoutside = (ev: mouseevent) => 
if (this.state.stateopen && !this.togglecontainer.current.contains(ev.target as node)) );}};
ulliclick = (index: number) => 
iconleftclick = () => )
}  iconrightclick = () => )
}  idblock = (year: string) => 
okbut = (ev: any) => 
textchange = () => 
changequarter = (item: any) => -$`);
this.setstate()
}  render()  = this.state;
const  = this.props;
let openonoff = false;
if (typeof (this.props.open) === "boolean")  else 
return (
}onchange=}
/>)}}
export default quarterpicker;

:global 

&:focus 
}.zjl-input[disabled] 
.default_input
.img
}.child}}
.zjl-timehear
}.timerxhlleft
&.active
&.warnnodata}}
}.con
}.righticon
}li }}
}}}

react 更改antd的預設樣式

2種方法 1.import styles from index.less 下面為index.less 直接引入就是全域性可以用 當然更建議外面套盒子 global ant modal body 2.直接在antd外面套一層盒子 通過less引入 然後把樣式一層層指定下去 例如 box ant tab...

React修改Antd元件樣式的方法

1 f12開啟除錯，選中elements選項 2 在elements的元素樹中選中相應的antd元件布局，然後檢視右端的css樣式表，找到控制項的css控制器結構。3 最後在我們自己的css樣式檔案中修改對應的控制器屬性就可以了 4 有一些屬性是在antd元件內部通過 設定的，這種情況下，通過上面那...

react中覆蓋antd元件的樣式

由於業務的個性化需求，我們經常會遇到需要覆蓋元件樣式的情況，這裡舉個簡單的例子。antd select 在多選狀態下，缺省會展示所有選中項，這裡我們給它加乙個限制高度，超過此高度就出滾動條。import from antd import styles from testpage.less const...