无法将TypeScript项目中ListItemText文本颜色改为白色求解决

核心问题与修复步骤 #

• 你定义了ListText这个styled组件，但代码里仍在使用原生的ListItemText，导致自定义样式完全没生效。
• Material UI的ListItemText内部有primary和secondary专属的类名，直接给组件加color属性无法覆盖内部文本的默认样式，需要精准选中这些类。
• secondary里的Typography组件也需要单独设置颜色，否则会保留默认样式。

修改后的完整代码 #

type ExploreCardsProps = {
  avatar: string
  headgear: string
  amount: number
}

// 精准选中ListItemText内部的primary和secondary文本元素设置颜色
const ListText = styled(ListItemText)(() => ({
  '& .MuiListItemText-primary': {
    color: 'white',
  },
  '& .MuiListItemText-secondary': {
    color: 'white',
  },
}))

export function ExploreCards ({avatar, headgear, amount} : ExploreCardsProps)  {
  return (
    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'black'}}>
      <ListItem alignItems="flex-start">
        <ListItemAvatar>
          <Avatar alt="Luis" src= {avatar} />
        </ListItemAvatar>
        {/* 使用自定义的ListText组件替代原生ListItemText */}
        <ListText 
          primary="Headgear"
          secondary={
            <React.Fragment>
              <Typography
                sx={{ display: 'inline', color: 'white'}}
                component="span"
                variant="body2"
              >
                {headgear}
              </Typography>
              {amount}
            </React.Fragment>
          }
        />
      </ListItem>
      <Divider variant="inset" component="li" />
    </List>
  );
}

额外说明 #

• 直接渲染的amount文本会继承secondary的颜色，所以只要secondary的颜色设为白色，它就会自动变成白色。
• 如果不想用styled组件，也可以直接在ListItemText上用sx属性设置内部类的样式，效果一致：

  <ListItemText
    sx={{
      '& .MuiListItemText-primary': { color: 'white' },
      '& .MuiListItemText-secondary': { color: 'white' }
    }}
    // ...其他属性
  />
  

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