如何修改React MUI Card中SUN和SAT的背景色

你可以通过在遍历数组时动态判断当前星期值，为SUN和SAT对应的Card添加额外样式属性来实现需求，具体修改如下：

核心思路 #

利用对象扩展运算符（...）合并基础样式与动态样式：

• 保留原有的cardstyle（比如margin设置）
• 当遍历到SUN或SAT时，额外添加backgroundColor属性

修改后的完整代码 #

const dayOfWeek = ['SUN','MON','TUE','WED','THU','FRI','SAT'];
const cardstyle = {
  margin: 1
};

<ImageList cols={7} rowHeight={80}>
  {dayOfWeek.map((w) => {
    // 动态生成当前Card的样式
    const currentCardStyle = {
      ...cardstyle,
      // 为SUN和SAT设置背景色，这里用浅灰色示例，可自行替换颜色值
      ...(w === 'SUN' || w === 'SAT' ? { backgroundColor: '#f5f5f5' } : {})
    };
    return (
      <ImageListItem key={w}>
        {/* 使用动态生成的样式 */}
        <Card style={currentCardStyle}>
          <CardContent><Typography>{w}</Typography></CardContent>
        </Card>
      </ImageListItem>
    )
  })}
</ImageList>

补充说明 #

• 颜色值可以替换为任何合法CSS颜色（十六进制、RGB、颜色名称等）
• 原代码中ImageList的col属性应为cols，已一并修正
• 如果后续需要更复杂的样式管理，也可以使用MUI的styled组件或useTheme钩子统一控制，当前方法对新手来说更直接易懂

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