如何修改react-star-ratings嵌套元素样式？TS环境下遇阻

一、TypeScript下添加classNames的方案 #

1. 优先安装官方类型定义 #

先检查是否安装了组件的TypeScript类型包，没有的话执行：

npm install @types/react-star-ratings --save-dev

安装后通常可以直接给组件传递className属性，类型会自动兼容。

2. 自定义类型扩展或类型断言 #

如果官方类型不支持className，可以封装自定义组件扩展类型：

import StarRatings, { StarRatingsProps } from 'react-star-ratings';

// 扩展原组件Props，添加className属性
type CustomStarProps = StarRatingsProps & { className?: string };

const CustomStarRatings = (props: CustomStarProps) => {
  const { className, ...restProps } = props;
  // 用div包裹并传入自定义类名，或直接给组件传递className（若组件底层支持）
  return <div className={className}><StarRatings {...restProps} /></div>;
};

// 使用示例
<CustomStarRatings className="Rating" rating={3.5} />

临时方案也可以用类型断言绕过检查：

<StarRatings {...(props as { className?: string })} className="Rating" />

二、SCSS模块修改嵌套元素样式无效的解决方法 #

SCSS模块默认是局部作用域，类名会被编译为哈希值，而react-star-ratings的内部元素类名是全局固定的，需要用:global()包裹目标类名来匹配，同时确保优先级足够：

正确的SCSS模块写法 #

// Rating.module.scss
.Rating {
  // 用:global包裹组件内部的全局类名
  & :global(.react-star-ratings__star) {
    color: #ffc107 !important;
    // 自定义尺寸等样式
    font-size: 24px;
  }

  & :global(.react-star-ratings__star--is-selected) {
    color: #ff9800 !important;
  }

  & :global(.react-star-ratings__star--half) {
    color: #ffb74d !important;
  }
}

关键注意点 #

• 确认开发者工具中内部元素的类名拼写（比如是否是react-star-ratings__star而非其他变体），避免类名错误。
• 若内联样式仍覆盖自定义样式，可进一步提升选择器优先级，比如结合父元素的哈希类名（SCSS模块自动生成）+ 目标类的组合选择器。

内容的提问来源于stack exchange，提问作者sun-rhythms