sx属性设置的Material UI Card边框色在DevTools显示正常却不渲染

1. 开发者工具与渲染结果不一致的原因 #

当使用Material UI Card的variant="outlined"时，组件的视觉边框并非直接通过Card元素的border属性实现，而是通过CSS伪元素::before来渲染的。你在sx中设置的borderColor确实会作用于Card本身，但这个元素的边框被伪元素的边框覆盖或隐藏了，所以浏览器开发者工具能看到Card元素的样式正确，但实际显示的是伪元素的边框，自然看不到你设置的颜色。

2. 使用variant="outlined"时覆盖边框颜色的问题 #

这不属于“已知bug”，而是Material UI组件的设计逻辑：outlined变体的Card通过伪元素来实现边框效果，目的是统一组件在不同状态下的样式表现。直接修改Card元素的borderColor无法影响伪元素，所以才会出现样式不生效的情况。

解决方法 #

你可以通过以下方式正确覆盖边框颜色：

方法1：通过sx直接修改伪元素样式 #

在样式配置中，针对::before伪元素设置边框颜色：

export const MessageCardStyles = {
  card: {
    bgcolor: "background.paper",
    "&::before": {
      borderColor: "primary.main",
      borderWidth: "2px" // 可选，按需调整边框宽度
    },
  },
} as const;

方法2：移除variant="outlined"，完全自定义边框 #

如果你不需要MUI自带的outlined伪元素逻辑，可以去掉variant="outlined"属性，直接通过sx设置边框：

return (
  <Card
    component="form"
    onSubmit={onSubmit}
    sx={MessageCardStyles.card}
    elevation={0}
  >
    {/* Content */}
  </Card>
);

对应的样式保持你原来的配置即可：

export const MessageCardStyles = {
  card: {
    bgcolor: "background.paper",
    border: "2px solid",
    borderColor: "primary.main",
  },
} as const;

方法3：全局主题配置（批量生效） #

如果需要全局修改所有outlined Card的边框颜色，可以在MUI主题中配置：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiCard: {
      variants: [
        {
          props: { variant: 'outlined' },
          style: {
            '&::before': {
              borderColor: 'primary.main',
            },
          },
        },
      ],
    },
  },
});

内容的提问来源于stack exchange，提问作者E.Cogalan