Styling Google Model-Viewer in Next.js

Question

I'm using Google Model Viewer in a Next component and I want to customize the progress bar, but the styles from my stylesheet don't seem to apply to any divs within Model Viewer.

Here is my setup using the App router:

1) I have a stylesheet at app/components/model-viewer.module.css with the following contents:

.model_view_wrapper {
  height: 100%;
  width: 100%;
}
.progress-bar {
  display: block;
  width: 33%;
  height: 10%;
  max-height: 2%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 25px;
  box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 0, 0, 0.5);
}

.progress-bar.hide {
  visibility: hidden;
  transition: visibility 0.3s;
}

2) I have a component at app/components/ComponentName.jsx which imports the stylesheet like this:

import styles from "./model-viewer.module.css"
import "./model-viewer.module.css"

3) At the beginning of ComponentName's default export function, it imports google model viewer using the following line: useEffect(() => { import("@google/model-viewer/dist/model-viewer").catch(console.error); }, []); (this is a workaround for server-side rendering found at https://github.com/google/model-viewer/discussions/2877)

4) Then it references model-viewer like this:

<div className={styles.model_view_wrapper}>
   <model-viewer
       loading="lazy"
       src={basepath + meshsuffix}
       poster={basepath + postersuffix}
       alt="test alt text"
       shadow-intensity="0"
       inputSensitivity="1.25"
       camera-controls
       orbit = "calc(-1.5rad + env(window-scroll-y) * 4rad) calc(0deg + env(window-scroll-y) * 180deg) calc(5m - env(window-scroll-y) * 10m)"
       auto-rotate = {restrict_model ? true : null}
       auto-rotate-delay="0"
       rotation-per-second="3deg"
       orbit-sensitivity="0.6"
       interaction-prompt="none"
       field-of-view= {extra_zoom ? "15deg" : "10deg"}
       interpolation-decay="5"
       disable-pan = {restrict_model ? true : null}
       disable-zoom = {restrict_model ? true : null}
   />
</div>

When called from one of my pages, the component successfully shows the model but doesn't use the progress bar styling from the stylesheet.

I know the stylesheet is being imported because I get the correct styling on the containing div with class model_view_wrapper, but none of my styling on any of the divs within the model viewer itself.

What am I doing wrong here? Do I need to import the stylesheet into each page that calls ComponentName.jsx as well?