如何修改TrustPilot评价组件的星星颜色？

AI 小北

2026-6-24

修改TrustPilot评分组件星星颜色的可行方案

你想修改TrustPilot评分组件的星星颜色，当前使用的组件代码如下：

<div  class="trustpilot-review-score">
    <div class="trustpilot-widget" 
    data-locale="en-US" 
    data-template-id="577258fb31fdsfsdsfdsfsdfewsdghh" 
    data-businessunit-id="56a27dfdsdsdfsdfse3000000587f4b4" 
    data-style-height="24px" 
    data-style-width="100%" 
    data-theme="light"
    data-sku="GRO-001"
    data-no-reviews="hide" 
    data-scroll-to-list="true" 
    data-style-alignment="left">  
        <a href="https://www.trustpilot.com/review/mycompany.com" target="_blank" rel="noopener">Trustpilot</a> </div>
</div>

组件显示效果：
TrustPilot评分组件显示效果

以下是几种可行的修改方案：

官方主题配置
你当前设置了data-theme="light"，TrustPilot官方提供light、dark等预设主题。可查阅TrustPilot Widget官方文档，确认是否支持通过新增配置参数自定义星星颜色，部分模板可能开放有限的配色自定义选项。
直接CSS覆盖（非iframe场景）
若组件直接渲染在当前页面DOM中（未通过iframe嵌入），可通过定位星星元素的类名修改样式。示例代码：
```
/* 根据实际元素类名调整选择器 */
.trustpilot-review-score .trustpilot-widget [class*="star-filled"],
.trustpilot-review-score .trustpilot-widget [class*="star-partial"] {
    color: #ff9900; /* 替换为你需要的颜色值 */
}
```
注意：如果组件是iframe加载，受浏览器同源策略限制，父页面CSS无法修改iframe内元素样式，此方法无效。
反向代理自定义（需服务器支持）
若需要深度自定义，可通过反向代理将TrustPilot组件内容加载到自身域名下，突破同源限制后自由修改CSS样式。此方法需要服务器配置，且必须严格遵守TrustPilot服务条款，避免违规使用。
自行实现星星组件（最高灵活性）
放弃官方组件，调用TrustPilot官方API获取评分数据，自行编写HTML和CSS渲染星星组件。这种方式完全可控星星颜色及整体样式，但需要申请TrustPilot API密钥，并处理数据请求逻辑。