Material UI容器hover时修改指定文本字体颜色的实现问题

要实现ListItem hover时，内部美元金额文本切换为黑色，核心是利用CSS后代选择器，在父元素的hover状态下关联修改子元素样式。以下是几种可行方案：

方案1：使用makeStyles（Material UI v4及兼容版本） #

import { makeStyles } from '@material-ui/core/styles';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(() => ({
  listItem: {
    transition: 'box-shadow 0.2s ease',
    // hover时给容器加阴影，同时修改子元素颜色
    '&:hover': {
      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
      '& .amount-text': {
        color: '#000',
      }
    }
  },
  amountText: {
    color: '#666', // 默认文本颜色
    transition: 'color 0.2s ease', // 颜色过渡动画
  }
}));

export default function PaymentOptions() {
  const classes = useStyles();

  return (
    <ListItem className={classes.listItem}>
      <Grid container alignItems="center">
        {/* 支付方式图标/名称等其他内容 */}
        <Typography className={`${classes.amountText} amount-text`}>$29.99</Typography>
      </Grid>
    </ListItem>
  );
}

方案2：使用sx属性（Material UI v5+推荐） #

import ListItem from '@mui/material/ListItem';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';

export default function PaymentOptions() {
  return (
    <ListItem
      sx={{
        transition: 'box-shadow 0.2s ease',
        '&:hover': {
          boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
          // 通过类名选中内部金额文本，修改颜色
          '& .amount-text': {
            color: 'black',
          }
        }
      }}
    >
      <Grid container alignItems="center">
        {/* 支付方式图标/名称等其他内容 */}
        <Typography
          sx={{
            color: '#666',
            transition: 'color 0.2s ease',
          }}
          className="amount-text"
        >
          $29.99
        </Typography>
      </Grid>
    </ListItem>
  );
}

方案3：使用styled组件（Material UI v5+） #

import styled from '@mui/material/styles/styled';
import ListItem from '@mui/material/ListItem';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';

const StyledListItem = styled(ListItem)(() => ({
  transition: 'box-shadow 0.2s ease',
  '&:hover': {
    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
    '& .amount-text': {
      color: 'black',
    }
  },
}));

const AmountText = styled(Typography)(() => ({
  color: '#666',
  transition: 'color 0.2s ease',
}));

export default function PaymentOptions() {
  return (
    <StyledListItem>
      <Grid container alignItems="center">
        {/* 支付方式图标/名称等其他内容 */}
        <AmountText className="amount-text">$29.99</AmountText>
      </Grid>
    </StyledListItem>
  );
}

关键要点 #

• 必须通过父元素ListItem的&:hover嵌套选择器，选中内部金额文本元素（这里用类名.amount-text定位），直接修改其color属性
• 给金额文本添加transition过渡动画，让颜色切换更平滑自然
• 如果金额文本是ListItem的直接子元素，也可以用& > Typography代替类名选择，但嵌套Grid时，类名定位更可靠

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