React中Material UI卡片按条件设置不同边框失效问题

问题根源 #

你的代码存在两个关键错误导致边框无法渲染：

1. 未设置borderStyle：CSS默认边框样式为none，仅设置borderWidth和borderColor不会显示边框。
2. borderColor字段错误混入solid样式值：borderColor仅用于指定颜色，边框样式需要单独通过borderStyle配置。

修复后的代码 #

提供两种修复方案，按需选择：

方案1：拆分设置边框属性

<Card
  key={key}
  elevation={0}
  sx={{
    borderStyle: 'solid', // 必须指定样式，否则边框不显示
    borderWidth: errorMessages?.length ||
      (productImage?.status === 'Linked' && productExistingAndLinked) ||
      (productImage.status === 'Existing' && productExistingAndLinked) ||
      (!isTrustMeCheck && productImage.status === 'Existing')
        ? '3px'
        : '1px',
    borderColor: errorMessages?.length
      ? 'error.main'
      : (productImage?.status === 'Linked' && productExistingAndLinked)
      ? 'success.main'
      : (productImage?.status === 'Existing' && productExistingAndLinked) || (!isTrustMeCheck && productImage.status === 'Existing')
      ? 'error.main'
      : 'inherit',
    borderRadius: '8px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    maxHeight: 'max-content',
  }}
> ....
</Card>

方案2：使用border简写属性（更简洁）

提前计算边框完整值，减少重复判断：

<Card
  key={key}
  elevation={0}
  sx={{
    border: (() => {
      const hasError = errorMessages?.length || 
        (productImage?.status === 'Existing' && productExistingAndLinked) ||
        (!isTrustMeCheck && productImage?.status === 'Existing');
      const isSuccess = productImage?.status === 'Linked' && productExistingAndLinked;
      
      const width = hasError || isSuccess ? '3px' : '1px';
      const color = hasError ? 'error.main' : isSuccess ? 'success.main' : 'inherit';
      
      return `${width} solid ${color}`;
    })(),
    borderRadius: '8px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    maxHeight: 'max-content',
  }}
> ....
</Card>

额外优化建议 #

• 将边框条件判断抽成单独变量，让sx属性更简洁易读。
• 合并重复的错误触发条件，减少逻辑冗余。

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