我刚刚将react-h5-audio-player加入到我的项目中，并按照 README 页面通过覆盖负责颜色的SCSS变量来定制样式。然而，我的样式似乎被忽略了。你知道这里可能出了什么问题吗？非常感谢。
这是我重现问题的代码：https://codesandbox.io/s/react-and-scss-forked-yeu0q?file=/src/index.js
如您所见，我已经包含了style.css（包含被覆盖的变量）在3个地方--导入audioplayer的js之前，导入audioplayer的css之前，以及这两个地方之后，以防万一，看看这些是否有效。我还随机添加了!default和!important到变量中，希望至少一些语法可以工作。但风格却一直被忽视。
如果有人喜欢在这里而不是codesandbox中看到它，我也会在这篇文章中包含代码：
style.css:

html,
body {
  background-color: papayawhip;
  font-family: sans-serif;

  h1 {
    color: tomato;
  }
}

$rhap_theme-color: #ff0000;   // Color of all buttons and volume/progress indicators
$rhap_background-color: #ff0000 !important; // Color of the player background
$rhap_bar-color: #ff0000 !default;     // Color of volume and progress bar
$rhap_time-color: #0000ff !important !default;       // Font color of current time and duration
$rhap_font-family: inherit !important;   // Font family of current time and duration

index.js:

import React from "react";
import { render } from "react-dom";

import "./styles.scss";

import AudioPlayer from "react-h5-audio-player";

import "./styles.scss";

import "react-h5-audio-player/src/styles.scss";

import "./styles.scss";

const App = () => (
  <div>
    <h1>Hello</h1>
    <AudioPlayer src="http://example.com/audio.mp3" />
  </div>
);

render(<App />, document.getElementById("app"));