无法覆盖 react-h5-audio-player scss 变量答案

【问题标题】：Unable to overwrite react-h5-audio-player scss variables无法覆盖 react-h5-audio-player scss 变量
【发布时间】：2022-01-29 16:07:55
【问题描述】：

我刚刚将react-h5-audio-player 包含在我的项目中，并按照README 页面通过覆盖负责颜色的SCSS 变量来自定义样式。然而，我的风格似乎被忽略了。你知道这里可能出了什么问题吗？非常感谢。

这是我重现问题的代码框：https://codesandbox.io/s/react-and-scss-forked-yeu0q?file=/src/index.js

如您所见，我在 3 个地方包含了 style.css（其中包含被覆盖的变量）——在导入 audioplayer 的 js 之前、在导入 audioplayer 的 css 之前以及在这两个位置之后，以防万一看看是否有这些作品。我还随机添加了!default 和!important 到变量中，希望至少有一些语法可以工作，但样式一直被忽略。

如果有人更喜欢在这里而不是在代码框中看到代码，我也会将代码包含在这篇文章中：

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"));

【问题讨论】：

标签： javascript html css reactjs sass

【解决方案1】：

对于另一种方法，您可以使用此示例：

.rhap_container {
  background: #f7f7f9;
}

.rhap_controls-section {
  margin-bottom: 15px;
}

.rhap_progress-section {
  height: 20px;
  padding-bottom: 20px;
}

.rhap_main-controls-button {
  width: 80px !important;
  height: 80px !important;
}

.rhap_main-controls-button {
  width: 56px;
  height: 56px;
  display: block;
}

.rhap_main-controls-button svg {
  color: #ff5555;
  width: 100%;
  height: 100%;
}
.rhap_progress-filled,
.rhap_progress-indicator {
  background-color: #ff5555 !important;
}

.rhap_button-clear.rhap_volume-button {
  color: #ff5555 !important;
}

.rhap_volume-bar, .rhap_volume-indicator {
  background-color: red;
}

【讨论】：