CSS Styled Component

[guirdy]

How can I apply this style using styled-component ?

.aws-btn {

--slider-height-percentage: 40%;
--slider-transition-duration: 575ms;
--organic-arrow-thickness: 4px;
--organic-arrow-border-radius: 0px;
--organic-arrow-height: 40px;
--organic-arrow-color: #538bd5;
--control-button-width: 10%;
--control-button-height: 25%;
--control-button-background: transparent;
--control-bullet-color: #62a4fa;
--control-bullet-active-color: #538bd5;
--loader-bar-color: #851515;
--loader-bar-height: 6px;
}

My AutoplaySlider:

const Slider = () => {
  return (
    <Container>
      <AutoplaySlider play={true} cancelOnInteraction={false} interval={3000}>
        <div data-src={Image1} />
        <div data-src={Image2} />
        <div data-src={Image3} />
      </AutoplaySlider>
    </Container>
  );
};

[trolit]

AutoplaySlider has property called cssModule. Assuming that you have your .aws-btn reference in styles.css, try this:

import styles from 'yourPath/styles.css';

const Slider = () => {
  return (
    <Container>
      <AutoplaySlider play={true} cancelOnInteraction={false} interval={3000} cssModule={styles}>
        <div data-src={Image1} />
        <div data-src={Image2} />
        <div data-src={Image3} />
      </AutoplaySlider>
    </Container>
  );
};