React引入Antd組件

Ant組件官網文檔
Ant組件的安裝和使用在官網都有教程，下面記錄一下本身的使用。
Ant組件是好用，一引入直接就有了功能組件。但問題是UI給咱們的和這些組件每每不同，好比樣式顏色，多個view，button什麼的，那麼怎麼定製ant組件的樣式去實現咱們的需求呢？
1.查閱ant組件的api文檔，裏面一般會有描述組件的屬性功能。好比Menu組件，它能夠很方便的實現二級菜單的功能，可是怎麼定製二級菜單每一個item的樣式呢，Menu組件有個data的label屬性，能夠接收string和ReactNode類型的參數，若是是string的話就直接顯示到原生的view上；若是是ReactNode類型，就會顯示自定義的樣式，那麼ReactNode又是什麼呢？ReactNode其實就是那些自定義的view，好比

(
      <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
        <text>test</text>
      </div>
    );

把label設置爲這個自定義的view以後，二級菜單的每一個item就會顯示成本身的view。
2.在瀏覽器的調試臺，在elements裏面找到ant組件，找到className，找到對應的屬性，而後在less或css裏面去修改樣式。
或者給ant組件設置一個className，在css裏面設置樣式也能夠。
再或者使用React.CSSProperties，在react裏面設置內聯樣式，舉個例子：

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
          Content of first tab
 </div>

上面那個style=後面的就是React.CSSProperties。