I can't seem to get custom styles applied to the carousel indicators to "stick"Expected behavior

Custom styles correctly applied to .carousel-indicator will render in the browser.

*Actual behavior*When I select the .carousel-indicators class and apply custom styles to it, they do not get applied.

Resources (screenshots, code snippets etc.)

<div class="my-carousel-panel">


<mdb-carousel-item>
  <div class="view w-100">
    <img class="d-block w-100" src="assets/images/slide1.jpg">
  </div>
  <div class="carousel-caption">
    <p>Slide 1</p>
  </div>
</mdb-carousel-item>

<mdb-carousel-item>
  <div class="view w-100">
    <img class="d-block w-100" src="assets/images/slide1.jpg">
  </div>
  <div class="carousel-caption">
    <p>Slide 1</p>
  </div>
</mdb-carousel-item>

<!-- other carousel items removed for brevity -->

.my-carousel-panel { .carousel-indicators { border: 2px solid red; }}

I have also tried copying the selector from Chrome Dev tools, which produces a selector that is very specific, all the way from body. Custom styles applied to that selector also do not get applied.

UPDATE: This is strange. If I define my custom styles in the component stylesheet, it does not work. However, if I define them in a global stylesheet, it does work. This is especially strange, because other styles that I've defined in my component stylesheet are working correctly.