如何在React的div中注册样式并正确设置星级评分样式？

这问题我熟！要实现用:before伪元素显示评分，核心是靠CSS变量把React里的动态评分值传递给伪元素——因为伪元素没法直接通过行内style设置样式，得用CSS变量当桥梁。我给你拆解成两步来实现：

1. 编写CSS类样式，让伪元素读取变量 #

伪元素的样式必须写在CSS里（用普通类最直接），我们通过var(--rating)获取行内设置的评分值，还能自定义显示样式：

/* 给伪元素提供定位基准的基础样式 */
.Stars {
  position: relative;
  /* 可选：如果不想显示div里原有的{movie.vote_average}，可以隐藏它 */
  /* opacity: 0; */
  /* 或者把原内容移出可视区域 */
  /* text-indent: -9999px; */
}

/* 用伪元素渲染评分 */
.Stars::before {
  /* 通过CSS变量拿到动态评分，还能加图标或文本修饰 */
  content: "⭐ " var(--rating) "分";
  /* 伪元素的布局和样式自定义 */
  position: absolute;
  top: 0;
  left: 0;
  color: #ffc107;
  font-weight: 600;
  font-size: 1rem;
  /* 如果要保留原内容，调整位置避免重叠： */
  /* left: 100%; */
  /* margin-left: 8px; */
}

2. 调整React的JSX代码 #

在JSX里，style属性推荐用对象形式（符合React规范），把动态评分值赋值给--rating变量：

<div 
  className="Stars" 
  style={{ '--rating': movie.vote_average }}
>
  {/* 这里的原内容可留可删，根据你的需求决定 */}
  {movie.vote_average}
</div>

原理说明 #

伪元素是CSS生成的元素，无法直接通过行内style控制它的content或样式。而CSS自定义属性（变量）可以在JSX行内动态设置，再在CSS伪元素中读取，完美解决了「React动态值传递给CSS伪元素」的问题。

举个实际效果：如果movie.vote_average是6.8，页面上会显示⭐ 6.8分（如果隐藏了原内容，就只会显示伪元素的内容）。

内容的提问来源于stack exchange，提问作者Алина Хром