"ant-design-vue": "^3.2.20"

headStyle自定义标题区域样式

<a-card :headStyle="headStyle"></a-card>

<script setup>
const headStyle = reactive({
  minHeight: "44px",
  height: "44px",
  fontSize: "14px",
  fontFamily: "PingFangSC, PingFang SC",
  fontWeight: "500",
  backgroundColor: "#28282C",
});
</script>

headStyle是在.ant-card-head添加行内样式。渲染结果：

.ant-card-head存在默认 min-height、font-size等css，根据实际需求进行重写。

标题内容区：

使用:deep()实现自定义css:

:deep(.ant-card-head-wrapper) {
  height: 44px;
  align-items: center;
}
:deep(.ant-card-head-title) {
  padding: 0;
}