1. The background

Descriptions are AntD components. The default style label is left-aligned and I wanted right-aligned. Like this:

image.png

The key is how to adjust the style?

2. Knowledge

The Descriptions component is introduced briefly.

Descriptions Components are Descriptions lists. Used to display multiple read-only fields in groups, commonly seen on detail pages.

For example, display user information:

image.png

image.png

As shown above, using Chrome’s check function, the code is analyzed and the corresponding style name is Ant-Descriptions -item-label, which uses flex layout. That’s easy.

3. Adjust the Descriptions component style: Right-justified

As shown in the following image, the Descriptions attribute labelStyle could accept a style setting that left “justifyContent: ‘Fleflex -end’,minWidth:100”.

image.png

The code is shown:

<Descriptions column={1} labelStyle={{justifyContent: 'flex-end',minWidth:100}}> <Descriptions.Item Label =" name ">{entity Description =" Descriptions ">{entity. Telephone}</Descriptions.Item> </Descriptions>Copy the code

4. Reference:

Ant. The design/components /… www.jianshu.com/p/4290522e1…