React+Material-UI：圆形评分进度条无法嵌入电影卡片适配问题

一、将圆形进度条定位到卡片底部角落 #

当前进度条跟随Link的垂直flex布局排列，要实现角落定位，通过绝对定位即可实现：

1. 在Movie组件的styles.js中添加评分容器样式：

// movie/styles.js
export default makeStyles((theme) => ({
  // ... 保留原有样式
  ratingContainer: {
    position: "absolute",
    bottom: "10px",
    right: "10px",
    width: "50px",
  },
}));

2. 在Movie.jsx中给包裹CircleRating的div绑定该类名：

// Movie.jsx
<Tooltip disableTouchListener title={`${movie.vote_average} / 10`}>
  <div className={classes.ratingContainer}>
    <CircleRating rating={movie.vote_average.toFixed(1)} />
  </div>
</Tooltip>

（注：父元素links已设置position: relative，绝对定位会相对于卡片容器生效）

二、修复自定义样式不生效问题 #

react-circular-progressbar的内部文本、轨道是SVG元素，直接给组件加className无法穿透到子元素，可通过以下两种方式解决：

方案1：Material-UI嵌套样式（贴合参考SCSS写法） #

修改CircleRating的styles.js：

// CircleRating/styles.js
import "react-circular-progressbar/dist/styles.css";
import { makeStyles } from "@mui/styles";

export default makeStyles(() => ({
  circleRating: {
    backgroundColor: "var(--black)",
    borderRadius: "50%",
    padding: "2px",
    // 嵌套全局类名覆盖内部元素样式
    "& .CircularProgressbar-text": {
      fontSize: "16px",
      fontWeight: 700,
      fill: "var(--black)",
    },
    "& .CircularProgressbar-trail": {
      stroke: "transparent",
    },
  },
}));

同步修改CircleRating.jsx，移除给CircularProgressbar添加的className：

// CircleRating.jsx
import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
import useStyles from "./styles";

const CircleRating = ({ rating }) => {
  const classes = useStyles();

  return (
    <div className={classes.circleRating}>
      <CircularProgressbar
        value={rating}
        maxValue={10}
        text={rating}
        styles={buildStyles({
          pathColor: rating < 5 ? "red" : rating < 7 ? "orange" : "green",
        })}
      />
    </div>
  );
};

export default CircleRating;

方案2：通过buildStyles直接配置（Material-UI风格） #

无需嵌套样式，直接通过组件API配置内部元素样式：

// CircleRating.jsx
<CircularProgressbar
  value={rating}
  maxValue={10}
  text={rating}
  styles={buildStyles({
    pathColor: rating < 5 ? "red" : rating < 7 ? "orange" : "green",
    textSize: "16px",
    textWeight: 700,
    textColor: "var(--black)",
    trailColor: "transparent",
  })}
/>

效果验证 #

完成修改后，圆形进度条会固定在电影卡片右下角，文本颜色、轨道透明等样式正常生效，与参考效果一致。

内容的提问来源于stack exchange，提问作者Khaled Ben Yahya