Media Chrome picks up CSS variables from my globals file

[ADTC]

In my globals file, there are CSS variables defined in :root as follows:

:root {
  --border-radius: 8px !important;
  --primary: #aabbcc !important;
  // and others
}

These are getting picked up by Media Chrome and applied to the buttons. I can't find an effective way to avoid this.

[ADTC]

Workaround:

As of now, I'm manually overriding the role='button' attribute on each of the buttons. It loses the ARIA benefits, sure, but it gets the job done.

Worst part though is, I have to do a useEffect in React to do this, because directly applying to the component doesn't stick. (I suppose if you're using regular HTML, you may not have to worry about this.)

  useEffect(() => {
    // Directly setting the attribute doesn't work, because
    // it gets overwritten by the media-chrome library.
    playButtonRef.current?.setAttribute('role', 'generic')
    muteButtonRef.current?.setAttribute('role', 'generic')
  })