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。