CSS стили не применяются на компонент Blazor

Почему-то не применяются стили к генерирующемуся html-элементу с классом carousel__dots. Но с другими не генерирующимися компонентами все хорошо.

У меня есть есть готовый скачанный компонент <BlazorSlickCarousel @ref="theCarousel" Configurations="configurations"> который автоматически генерирует собственные dots уже на html странице и я их под свой проект решил намного стилизовать. Сам же компонент генерируется и прекрасно выполняет свою функцию но без стилей, на сам компонент применяется данный класс, обращаться я так же пробовал и напрямую и через !important. Скриншот ниже демонстрирует текущую ситуацию.

Вот так выглядят применяемые стили, ошибок в написании названии и прочем я не нашел ибо на другие не генерирующиеся компоненты все работает нормально, так же пробовал менять render-mode, думал дело в нем (стоит ServerPrerendered). Версия .NET 5, Blazor.

.carousel {
    &__dots {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;

        li {
            margin: 0px 3px;

            button {
                height: 5px;
                width: 30px;
                background-color: black;
            }

            &.slick-active {
                background-color: gray;
            }
        }
    }
}

Полный html код выглядит так

<div class="carousel">
    <h2 class="carousel__name">Новинки</h2>
    <div @onclick="async () => await theCarousel.Prev()" class="carousel__prev-arrow unselectable"><span class="unselectable">&#60;</span></div>
    <BlazorSlickCarousel @ref="theCarousel" Configurations="configurations">
        <BlazorSlickCarouselContent>
            <div class="carousel__carousel-item">
                <div class="carousel-item__image-block">
                    <a href="#" aria-label="Перейти в личную карточку товара Ботинки adidas-Terrex-Trailmaker-Mid-R.RDY-K3"><img class="image-block__image" src="./images/index/section3/Ботинки_для_девочек_adidas_Terrex_Trailmaker_Mid_R.RDY_K3-removebg-preview.webp" alt="Картинка ботинок adidas-Terrex-Trailmaker-Mid-R.RDY-K3" title="Ботинки adidas-Terrex-Trailmaker-Mid-R.RDY-K3"></a>
                    <!-- <a class="image-block__favorites" href="#" aria-label="Добавить товар Ботинки adidas-Terrex-Trailmaker-Mid-R.RDY-K3 в избранное"><img src="./icons/header/Heart.svg" alt="Иконка избранного" title="Добавить в избранное"></a> -->
                    <a class="image-block__favorites" href="#" aria-label="Удалить товар Ботинки adidas-Terrex-Trailmaker-Mid-R.RDY-K3 из избранного"><img src="./icons/header/Slash-heart.svg" alt="Перечеркнутая иконка избранного" title="Удалить из избранного"></a>
                    <!-- <a class="image-block__cart" href="#" aria-label="Добавить товар Ботинки adidas-Terrex-Trailmaker-Mid-R.RDY-K3 в корзину"><img src="./icons/header/Cart.svg" alt="Иконка корзины" title="Добавить в корзину"></a> -->
                    <a class="image-block__cart" href="#" aria-label="Удалить товар Ботинки adidas-Terrex-Trailmaker-Mid-R.RDY-K3 из корзины"><img src="./icons/header/Slash-cart.svg" alt="Перечеркнутая иконка корзины" title="Удалить из корзины"></a>
                    <div class="image-block__discount-block hasDiscount">
                        <!-- hasDiscount -->
                        <span class="discount-block__amount">-10%</span>
                        <img class="discount-block__icon" src="./icons/index/Discount.svg" alt="Иконка скидки" title="Скидка товара">
                    </div>
                </div>
                <a class="carousel-item__title" href="#" aria-label="Перейти в личную карточку товара Ботинки adidas-Terrex-Trailmaker-Mid-R.RDY-K3">Ботинки Adidas Terrex Trailmaker</a>
                <div class="carousel-item__price-block hasDiscount">
                    <!-- hasDiscount -->
                    <span class="price-block__price">8 999 ₽</span>
                    <span class="price-block__discount">8 100 ₽</span>
                </div>
            </div>
        </BlazorSlickCarouselContent>
        <BlazorSlickCarouselLoading>
            <span>Loading...</span>
        </BlazorSlickCarouselLoading>
    </BlazorSlickCarousel>
    <div @onclick="async () => await theCarousel.Next()" class="carousel__next-arrow unselectable"><span class="unselectable">&#62;</span></div>
</div>