Попытка переопределить стиль реагирования с помощью Babel

Question

У меня большая проблема, я знаю, что если я захочу поиграть со стилями slick-dots и slick-arrow, я могу поставить точку через CSS, но я работаю с babel и SSR и не могу понять, как переопределить эти стили ...

Вот мой style код:

const useStyles = makeStyles(theme => ({
  slickSlider: {
    slickArrow: {
      '.&:slick-next': {
        right: '100px'
      },
      '.&:slick-prev': {
        left: '100px'
      }
    },
  },
}));

А вот мой скользкий компонент:

<Slider className={classes.slickSlider} dots={true} infinite={true} dotsClass={'slick-dots'} slidesToShow={1} slidesToScroll={1} autoplay={false} autoplaySpeed={1000} pauseOnHover={true}>
  <div>
    <img
      src="images/EventsHome/Events/event02.png"
      alt="Eventos - Stadibox"
      style={{ width: '100%', borderradius: '4px', }}
    />
  </div>
  <div>
    <img
      src="images/EventsHome/Events/event02.png"
      alt="Eventos - Stadibox"
      style={{ width: '100%', borderradius: '4px', }}
    />
  </div>
  <div>
    <img
      src="images/EventsHome/Events/event02.png"
      alt="Eventos - Stadibox"
      style={{ width: '100%', borderradius: '4px', }}
    />
  </div>
</Slider>

Но не работает Я отчаянно пытаюсь изменить эти стили с помощью babel. Буду признателен за вашу помощь.