Customizing Swiper in Vue 3 - vue.js

Question

I have a simple, functional swiper working in Vue 3 with Swiper.js 8.4.5 working off these Vue examples (sans scrollbar and A11y). As shown, everything appears to be working as intended.
<TileFormat>
<div style="width: 100%; height: 100%; display: flex">
<swiper
:modules="modules"
:slides-per-view="1"
:space-between="50"
navigation
:pagination="{ clickable: true }"
#swiper="onSwiper"
#slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
</div>
</TileFormat>
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar],
};
},
I would like to modify elements of the Navigation param (size, color, etc.) but have been unable to find a way to accomplish that. I have done this mostly with attempts to modify the css within the scoped style block of the view (which are ignored or overwritten). I've even tried skipping import 'swiper/css/navigation'; and rolling my own, but that doesn't work either. The examples of similar changes I can find seem to apply to versions of Swiper.js that aren't written for Vue 3.
The Swiper.js docs say:
Note, Swiper Vue.js component will create required elements for Navigation, Pagination and Scrollbar if you pass these params without specifying its elements (e.g. without navigation.nextEl, pagination.el, etc.)
I have come to the quasi-conclusion that I need to add my changes to the Navigation module within the setup() method before passing it; however, I can't seem to locate an example of how to do that.
What is the "most robust" way to modify Swiper components in Vue 3?
EDIT 1: By the way, this approach was also unsuccessful:
:navigation="{enabled: true, prevEl: '.myPrev', nextEl: '.myNext'}"

Answer 1

Usually, to be able to customize any kind of UI components (it being something like Bootstrap or a UI package), you use:
an increased specificity, hence why the ID is working in your case
an element as deep as you can, if you want to go further you can use :deep
the usage of !important may be overkill but that one is a good case to override such projects

Answer 2

Using an id instead of a class allowed me to customize the slider object (it still needs a lot of work). There may also be a specific class reference that will work, but the options I tried were ignored (or overwritten).
<TileFormat>
<div style="width: 100%; height: 100%; display: flex;">
<swiper
:modules="modules"
:slides-per-view="1"
:space-between="50"
navigation
:pagination="{ clickable: true }"
#swiper="onSwiper"
#slideChange="onSlideChange"
id="mySlider"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
</div>
</TileFormat>
#mySlider .swiper-button-prev,
#mySlider .swiper-button-next {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
color: #888888;
--swiper-navigation-size: 20px;
}