如何在Material UI的Card组件上方添加自定义Logo？

用Material UI组件实现（推荐，符合组件化思路） #

直接用Stack组件把Logo和Card垂直排列，无需额外写太多CSS：

import { Stack, Card, CardContent } from '@mui/material';

export default function BusinessFormCard() {
  return (
    <Stack spacing={2} alignItems="center" sx={{ maxWidth: 400, margin: '2rem auto' }}>
      {/* 本地PNG/SVG用img标签引入 */}
      <img src="/your-logo.png" alt="业务Logo" style={{ width: 80, height: 80 }} />
      {/* 如果是导出的SVG组件，直接引入使用 */}
      {/* <CustomLogo sx={{ width: 80, height: 80 }} /> */}
      <Card>
        <CardContent>
          {/* 这里放你的表单内容 */}
          <p>表单输入项等内容</p>
        </CardContent>
      </Card>
    </Stack>
  );
}

• Stack的spacing属性控制Logo和Card的间距，alignItems="center"让Logo水平居中
• sx属性可以直接设置整体容器的宽度和外边距，快速调整布局

用自定义CSS实现 #

如果更习惯手写CSS，给Card的父容器加相对定位，Logo用绝对定位偏移：

import { Card, CardContent } from '@mui/material';
import './form-card.css';

export default function BusinessFormCard() {
  return (
    <div className="card-wrapper">
      <img src="/your-logo.png" alt="业务Logo" className="card-logo" />
      <Card className="form-card">
        <CardContent>
          {/* 表单内容 */}
          <p>表单输入项等内容</p>
        </CardContent>
      </Card>
    </div>
  );
}

对应的CSS文件（form-card.css）：

.card-wrapper {
  position: relative;
  max-width: 400px;
  margin: 2rem auto;
}

.card-logo {
  position: absolute;
  top: -40px; /* 取Logo高度的一半，让Logo一半悬在Card上方 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 80px;
  height: 80px;
}

.form-card {
  padding-top: 40px; /* 给Logo留出空间，避免表单内容被遮挡 */
}

资料查找建议 #

• 优先看Material UI官方文档的「Layout」板块，里面有Stack、Box等布局组件的详细用法和示例
• 官方的「Styling」板块会讲解sx属性和自定义CSS的结合方式，能快速掌握样式调整技巧

内容的提问来源于stack exchange，提问作者Camila M. Teszkiewicz Novick