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。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！