如何让antd Descriptions组件中无标题项左对齐？

我正在使用antd的Descriptions组件，需求是当项没有title时，对应的value需要左对齐，效果如下图所示：

我尝试修复但未成功，请问该如何解决？

附当前代码（demo.tsx）：

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Descriptions } from "antd";

const App: React.FC = () => {
  const items = [
    { title: "title 1", value: "value-1" },
    { title: "title 2", value: "value-2" },
    { value: "value-3" }
  ];
  return (
    <Descriptions column={1} bordered>
      {items.map((description, index) =>
        description.title ? (
          <Descriptions.Item
            key={index}
            label={description.title}
            labelStyle={{ width: "25%" }}
          >
            {description.value}
          </Descriptions.Item>
        ) : (
          <div key={index}>{description.value}</div>
        )
      )}
    </Descriptions>
  );
};

export default App;

直接在Descriptions组件内嵌套div会破坏原有布局结构，导致对齐异常，推荐以下两种规范的实现方式：

方式一：利用Descriptions.Item的span属性占满整行 #

无需额外嵌套div，给无title的项设置span={2}（对应Descriptions默认的label+value两列布局），让它占满整行，同时隐藏空label的占位：

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Descriptions } from "antd";

const App: React.FC = () => {
  const items = [
    { title: "title 1", value: "value-1" },
    { title: "title 2", value: "value-2" },
    { value: "value-3" }
  ];
  return (
    <Descriptions column={1} bordered>
      {items.map((description, index) =>
        description.title ? (
          <Descriptions.Item
            key={index}
            label={description.title}
            labelStyle={{ width: "25%" }}
          >
            {description.value}
          </Descriptions.Item>
        ) : (
          <Descriptions.Item
            key={index}
            label=""
            span={2}
            labelStyle={{ display: "none" }}
          >
            {description.value}
          </Descriptions.Item>
        )
      )}
    </Descriptions>
  );
};

export default App;

方式二：自定义CSS样式覆盖 #

如果不想修改组件结构，可给无title的内容添加自定义类名，通过CSS强制对齐：

第一步：修改JSX代码 #

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Descriptions } from "antd";

const App: React.FC = () => {
  const items = [
    { title: "title 1", value: "value-1" },
    { title: "title 2", value: "value-2" },
    { value: "value-3" }
  ];
  return (
    <Descriptions column={1} bordered>
      {items.map((description, index) =>
        description.title ? (
          <Descriptions.Item
            key={index}
            label={description.title}
            labelStyle={{ width: "25%" }}
          >
            {description.value}
          </Descriptions.Item>
        ) : (
          <div key={index} className="full-width-desc-value">{description.value}</div>
        )
      )}
    </Descriptions>
  );
};

export default App;

第二步：在index.css中添加样式 #

.full-width-desc-value {
  width: 100%;
  padding: 16px;
  border: 1px solid #d9d9d9;
  border-top: none;
  box-sizing: border-box;
}

推荐优先使用方式一，更符合Ant Design组件的设计规范，避免样式冲突。

内容的提问来源于stack exchange，提问作者CCCC