How do I change the background color of the React Awesome Slider component I tried overwritng the css I tried using !important tag here am I missing something like I cannot find out what property it is to overwrite the background color style. Does anyone know how to do this?
here is my component using the Awesome Slider component:
import styles from "../style";
import AwesomeSlider from "react-awesome-slider";
import 'react-awesome-slider/dist/styles.css';
import React, { useRef, useState } from 'react';
import '../index.css'
import 'react-awesome-slider/dist/custom-animations/cube-animation.css';
const Component = () => {
const sliderStyle = {
backgroundColor: 'red !important',
};
return (
<section id="top-level" ref={sectionRef} className={`${styles.paddingY} ${styles.flexCenter} flex
<div className="flex flex-wrap sm:justify-start justify-center w-full feedback-container relative z-[1] ">
<AwesomeSlider className="slider" style={sliderStyle} bullets={false} mobileTouch={true} animation="cubeAnimation" >
{array.map((card) => (
<div key={card.id}>
<AnotherComponent {...card} />
</div>
))}
</AwesomeSlider>
</div>
</section>
);}
export default Component;