如何在Bit组件MDX文档的概览标签中添加额外属性？

这是完全可行的，以下是几种具体实现方式：

1. 扩展组件配置文件的文档字段 #

通过组件的配置文件（如bit.config.ts或组件目录下的bit.json），在docs.properties中为属性添加自定义字段：

// bit.config.ts
export default {
  components: {
    'your-scope/your-component': {
      docs: {
        properties: {
          buttonText: {
            type: 'string',
            default: 'Click Me',
            description: '按钮显示文本',
            // 添加自定义属性
            required: true,
            demoValue: 'Submit'
          }
        }
      }
    }
  }
};

Bit默认的文档渲染器会自动识别并展示这些新增字段，无需额外配置。

2. 自定义文档渲染模板 #

如果需要更个性化的展示，可创建自定义文档模板组件，手动读取组件元数据并渲染自定义属性：

// custom-doc-template.tsx
import { useComponent } from '@bitdev/react.hooks.use-component';

export function CustomDocTemplate() {
  const component = useComponent();
  const properties = component?.docs?.properties || {};

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Default</th>
          <th>Description</th>
          <th>Required</th>
          <th>Demo Value</th>
        </tr>
      </thead>
      <tbody>
        {Object.entries(properties).map(([name, prop]) => (
          <tr key={name}>
            <td>{name}</td>
            <td>{prop.type}</td>
            <td>{prop.default}</td>
            <td>{prop.description}</td>
            <td>{prop.required ? '✅' : '❌'}</td>
            <td>{prop.demoValue}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

将该模板设置为组件文档的默认模板后，即可按照自定义格式展示所有属性（包括新增字段）。

3. 直接修改组件元数据 #

在组件目录下的.bit/metadata.json文件中，直接为属性添加自定义字段：

{
  "name": "your-scope/your-component",
  "docs": {
    "properties": {
      "buttonText": {
        "type": "string",
        "default": "Click Me",
        "description": "按钮显示文本",
        "required": true
      }
    }
  }
}

注意：更新组件版本时需确保该文件不会被自动覆盖，建议结合配置文件的方式使用。

注意事项 #

• 不同Bit版本对自定义属性的支持可能存在差异，建议核对当前使用版本的官方文档细节
• 私有作用域发布组件时，需确保配置文件和元数据被正确打包，避免自定义字段丢失

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