how to import awesome-react-slider without applying the default style

[Marek]

A simple source that reproduces my problem

import AwesomeSlider from 'react-awesome-slider';

import styles from './styles.css';

export default function PromoView(){
    const slider = (
        <AwesomeSlider
          cssModule={styles}
        >
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
        </AwesomeSlider>
    );
    return(
        <div className="promoView">
          { slider }
        </div>
    )
}

and styles.css generated using https://caferati.me/demo/react-awesome-slider/images

.aws-btn {
    --slider-height-percentage: 60%;
    --slider-transition-duration: 575ms;
    --organic-arrow-thickness: 4px;
    --organic-arrow-border-radius: 0px;
    --organic-arrow-height: 40px;
    --organic-arrow-color: #6a6a6a;
    --control-button-width: 10%;
    --control-button-height: 25%;
    --control-button-background: transparent;
    --control-bullet-color: #6a6a6a;
    --control-bullet-active-color: #6a6a6a;
    --loader-bar-color: #851515;
    --loader-bar-height: 6px;
}

the outcome

it seems like if I import the awesome-react-slider it automatically imports its style as well, if I want my own style I can't import awesome-react-slider... Could someone explain how to put my own style and load awesome-react-component without the default style?

[Marek]

I think I just misunderstood the usage. What I actually needed was

          <div style={style}>1</div>
          <div style={style}>2</div>
          <div style={style}>3</div>
          <div style={style}>4</div>

and

    const style = {
        "background-color": "transparent"
    };