AntD 的 Descriptions 组件实现“ 右对齐效果 ”

1. 背景

Descriptions 是 AntD 组件，默认的样式 label 是居左对齐的，而我想要 右对齐的效果。比如这样：

image.png

关键是样式要怎么调整呢？

2.知识

先简单介绍下 Descriptions 组件。

Descriptions 组件是描述列表。用于成组展示多个只读字段，常见于详情页的信息展示。

比如展示用户信息：

image.png

image.png

如上图，使用 chrome 的检查功能，分析代码发现 对应的样式名是 ant-descriptions-item-label ，它使用了 flex 布局。这就好办了。

3. 调整Descriptions 组件样式: 右对齐

如下图所示，Descriptions 的属性 labelStyle 可以接受一个样式设置，写上 “justifyContent: 'flex-end',minWidth:100” 即可。

image.png

代码见：

  <Descriptions column={1} labelStyle={{justifyContent: 'flex-end',minWidth:100}}>
          <Descriptions.Item label="姓名">{entity.driverName}</Descriptions.Item>
          <Descriptions.Item label="联系方式">{entity.telephone}</Descriptions.Item>
      </Descriptions>

4.参考：

https://ant.design/components/descriptions-cn/#components-descriptions-demo-size https://www.jianshu.com/p/4290522e1560