为 Card 组件内的图标设置样式 - Mintlify

Card 组件没有用于设置图标样式的 props，例如添加背景色、圆角或内边距。要在继续使用 Card 组件的同时自定义卡片图标，请使用自定义 CSS 定位图标。

定位卡片图标

卡片图标在渲染时带有 data-component-part="card-icon" 属性。通用的 icon 元素选择器无法匹配卡片内的图标，因此像 card icon { } 这样的规则不会生效。请改用数据属性选择器：

styling.css

[data-component-part="card-icon"] {
  background-color: var(--gray-100);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

如果该选择器与其他样式冲突，可以使用 .card [data-component-part="card-icon"] 将规则限定在卡片范围内。将规则保存在内容目录中的任意 .css 文件里。内容目录是仓库中包含 docs.json 文件的文件夹。Mintlify 会自动在每个页面加载该文件。关于自定义 CSS 的加载方式和可用选择器的完整列表，请参阅自定义脚本。

其他卡片部分

卡片还公开了其他 data-component-part 属性，你可以用同样的方式设置样式，包括 card-title、card-content、card-image 和 card-cta。完整列表请参阅自定义脚本。

相关主题

图标标注框卡片

⌘I