如何修改<ReactPlayer />组件的播放按钮、进度条、背景色样式

react-player 开启默认 controls 属性时，播放按钮、进度条这类控件要么是浏览器原生shadow DOM渲染，要么是第三方音频平台（如你用的SoundCloud）跨域iframe内嵌的内容，外层CSS无法直接穿透修改，以下是可落地的实现方式：

方案1：关闭默认控件，自定义全套播放层（推荐，样式100%可控） #

这是跨域音频场景下唯一稳定可用的方案，完全摆脱原生/第三方默认UI限制，所有样式可以按需调整。

• 第一步：调整组件逻辑，关闭默认控件，通过react-player提供的API实现播放控制

import { useState, useRef } from 'react'
import ReactPlayer from 'react-player'

export default function CustomAudioPlayer() {
  const playerRef = useRef(null)
  // 播放状态
  const [isPlaying, setIsPlaying] = useState(false)
  // 播放进度（0-1区间）
  const [playedProgress, setPlayedProgress] = useState(0)
  // 音频总时长
  const [totalDuration, setTotalDuration] = useState(0)

  // 进度条点击跳转逻辑
  const handleProgressClick = (e) => {
    const barRect = e.currentTarget.getBoundingClientRect()
    const targetPercent = (e.clientX - barRect.left) / barRect.width
    playerRef.current?.seekTo(targetPercent)
    setPlayedProgress(targetPercent)
  }

  return (
    <div className="player-wrapper" >
        <ReactPlayer 
            ref={playerRef}
            url="https://soundcloud.com/supperclubmix/black-eye-peas-dirty-bit-remix"
            className="react-player"
            id="music"
            height="0"
            width="90%"
            playing={isPlaying}
            loop={true}
            onProgress={({ played }) => setPlayedProgress(played)}
            onDuration={(dur) => setTotalDuration(dur)}
            config={{
              soundcloud: {
                options: { visual: false } // 关闭SoundCloud默认内嵌UI
              }
            }}
        />
        {/* 自定义控制层 */}
        <div className="custom-control-bar">
          <button 
            className="custom-play-btn" 
            onClick={() => setIsPlaying(!isPlaying)}
          >
            {isPlaying ? '暂停' : '播放'}
          </button>
          <div className="custom-progress-track" onClick={handleProgressClick}>
            <div 
              className="custom-progress-fill" 
              style={{ width: `${playedProgress * 100}%` }}
            />
          </div>
        </div>
    </div>
  )
}

• 第二步：编写CSS，按需自定义所有元素样式（播放按钮、进度条、背景色均可自由调整）

.player-wrapper {
  /* 自定义组件整体背景色 */
  background: #181818;
  border-radius: 12px;
  padding: 20px 16px;
  width: 100%;
}
.react-player {
  margin: 0 auto;
}
.custom-control-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 90%;
  margin: 0 auto;
}
/* 自定义播放按钮样式 */
.custom-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #f03e3e;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
/* 自定义进度条轨道样式 */
.custom-progress-track {
  flex: 1;
  height: 6px;
  background: #444;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
/* 自定义进度条已播放部分样式 */
.custom-progress-fill {
  height: 100%;
  background: #f03e3e;
  border-radius: 3px;
  transition: width 0.1s linear;
}

方案2：CSS穿透修改原生控件（仅同域资源可用，不适用当前SoundCloud场景） #

如果加载的是存放在自己站点服务器下的同域音频文件，可以通过伪元素选择器穿透修改浏览器原生音频控件样式，但跨域的第三方平台iframe内容受浏览器同源策略限制，外层没有任何权限修改内部样式，参考代码如下：

/* 仅同域audio/video资源生效，跨域无效 */
.react-player audio::-webkit-media-controls-play-button {
  background-color: #f03e3e;
  border-radius: 50%;
}
.react-player audio::-webkit-media-controls-timeline {
  background: #444;
  height: 6px;
  border-radius: 3px;
}
.react-player audio::-webkit-media-controls-panel {
  background-color: #181818;
}

注意：所有第三方音频平台（SoundCloud、网易云音乐、QQ音乐等）的外链嵌入播放器均为跨域资源，不存在直接修改内部默认样式的可行方法，直接使用方案1自定义控件是长期维护成本最低的选择。

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