如何在React Material UI中为Card组件设置边框颜色？

默认状态下MUI Card没有预设边框样式，仅设置borderColor不会生效，需要同时配置边框宽度、边框样式两个属性才能看到效果，以下是几种可行实现方式：

方法1：直接补全style属性的边框配置 #

不需要修改其他代码，仅在原有style属性里补充边框宽度和样式即可：

<Card style={{ 
  borderWidth: '1px',
  borderStyle: 'solid',
  borderColor: 'red' 
}}>
  {/* 卡片内容 */}
</Card>

也可以简写为：

<Card style={{ border: '1px solid red' }}>
  {/* 卡片内容 */}
</Card>

方法2：使用MUI推荐的sx属性配置 #

sx是MUI v5内置的样式方案，支持直接调用主题变量，写法更简洁：

<Card sx={{ 
  border: 1, // 等效于1px solid
  borderColor: 'red'
  // 也可以调用主题色：borderColor: 'primary.main'
}}>
  {/* 卡片内容 */}
</Card>

如果你的Card已经设置了variant="outlined"（默认自带灰色边框），直接设置sx={{ borderColor: 'red' }}即可生效。

方法3：用styled组件封装复用样式 #

如果多个卡片需要统一边框样式，用styled封装自定义组件更高效：

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

// 自定义带红色边框的Card组件
const RedBorderCard = styled(Card)(() => ({
  border: '1px solid red'
}));

// 业务代码中直接调用
<RedBorderCard>
  {/* 卡片内容 */}
</RedBorderCard>

样式冲突排查 #

如果按以上方法设置仍不生效，检查是否有更高优先级的全局样式、CSS模块样式覆盖了边框属性，可以临时加!important测试确认是否是优先级问题：

<Card style={{ border: '1px solid red !important' }} />

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