React引入Antd组件

最新推荐文章于 2024-08-05 23:30:12 发布

weixin_34367845

最新推荐文章于 2024-08-05 23:30:12 发布

阅读量1.4k

点赞数

文章标签： javascript python git ViewUI

原文链接：https://my.oschina.net/u/2606060/blog/3055156

版权

2019独角兽企业重金招聘Python工程师标准>>>

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。

转载于:https://my.oschina.net/u/2606060/blog/3055156