vue-slick-carouselの矢印ボタン押下時の枠線を非表示にしたい

Question

概要

vue-slick-carouselにてスライダーを作っています。
スライダーを作ったのは、いいものの、左右の矢印ボタンを押下した際に、枠線がでて、非常に見苦しいです。

そのため、scssにて枠線を打ち消す、属性などの当ててみたのですが、打ち消すことができません。

この枠線を打ち消す方法をご教示いただければと思います。

ボタン押下前

ボタン押下後

コード

Show.vue

<template>
  <section>
    <VueSlickCarousel v-bind="slickOptions" v-if="Object.keys(posts).length">
      <div v-for="post in posts">
        <p>{{ post.title }}</p>
      </div>
    </VueSlickCarousel>
  </section>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default {
  name: 'MyComponent',
  components: {VueSlickCarousel},
  data() {
    return {
      slickOptions: {
        dots: true,
        arrows: true,
        swipe: false,
        slidesToScroll: 3,
        slidesToShow: 3,
        infinite: false,
        speed: 1000,
        prevArrow: $('.slick-prev'),
        nextArrow: $('.slick-next')
      },
    }
  }
}
</script>

slick.scss

@charset "utf-8";
// ここでoutlineとborderをnoneにしたけど、枠線が出てしまう
.slick-prev{
  outline: none;
  border: none;
}

.slick-prev:before {
  color: #c7c7c7;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  position: relative;
  right: 10px;
}

.slick-next:before {
  color: #c7c7c7;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  outline: none;
  border: none;
}

Answer 1

親要素の縦横を0にすると枠が消えました

.slick-prev{
  width: 0;
  height: 0;
}