How to override default styles?

[desmond-tuiyot]

Hi, I love the library but I'm having trouble customizing the styling - I want to change some of the font and icon sizes as well as the padding, among other things.
What I've tried: I first import the default styles.css file that come with the library, and then import a custom css stylesheet that defines some of the classes in the default file. This unfortunately doesn't work. So, how can I override some of the default classes to customize my component? Thanks

import AudioPlayer from "react-h5-audio-player";
import "style-loader!css-loader!react-h5-audio-player/lib/styles.css";
import "./audioStyles.css";

[lhz516]

Not sure if it's the issue of your bundler. Need more details. When you define a class like .rhap_container in audioStyles.css. Are you able to see the style in the inspector?

[desmond-tuiyot]

Sorry for the late reply. I'm actually able to see the class name defined in the respective elements, but I can't see the styles themselves in the inspector. It might be an issue with my bundler as you said. I have tried doing this with another component, with the same result. I primarily use Material-UI's styling solutions so I didn't notice that this wasn't working at all.

[lhz516]

Looks like your bundling tool is changing the class names. It has nothing to do with this library, please consider a solution on your bundling tool level