Programmatically changing style of a component in MDX

[einheit-de]

I'm trying to programmatically display/hide a react-music-player instance.
Unfortunately, to no avail.

While the prop itself is being updated, there's no render update.

Any idea on how to achieve this?

<button 
  onClick={play}
  style={
    {
      color: "var(--ifm-color-primary-dark)",
      border: "none",
      background: "transparent",
      fontSize: "larger",
      cursor: "pointer"
    }
  }>🎧 <Translate id="buttonListen">Zuhören</Translate></button>

import BrowserOnly from "@docusaurus/BrowserOnly";
import ReactJkMusicPlayer from "react-jinke-music-player";
import "react-jinke-music-player/assets/index.css";
import { useState, useEffect, useRef } from "react";

export const audioList = [
  {
    name: "Polizei- und Gesetzesreform",
    singer: "Mark Bauermeister (einheit-de.github.io)",
    cover:
      "/img/bg.jpg",
    musicSrc:
      "/mp3/justice.mp3",
  },
]

export let audioPlayer = null
export let audioInstance = null
export const options = {
  audioLists: audioList,
  defaultPlayIndex: 0,
  theme: "auto",
  autoPlay: false,
  defaultPosition: { top: 80, right: 80 },
  glassBg: true,
  remove: false,
  showPlayMode: false,
  showMediaSession: true,
  mode: "full",
  toggleMode: false,
}

export function play() {
  if (audioInstance != null) {
    console.log(audioPlayer.current.props.style.display)
    audioPlayer.current.props.style.display = "none"
    console.log(audioPlayer.current.props.style.display)
    audioInstance.play()
  }
}

<BrowserOnly>
  {() => {
    audioPlayer = useRef()
    return <ReactJkMusicPlayer
      ref={audioPlayer}
      style={{display: "block"}}
      getAudioInstance={(instance) => { audioInstance = instance }} 
      {...options} />;
  }}
</BrowserOnly>

I've also tried other concepts (linking the style to a global object and mutating the object, useEffect() in combination with document.getElementsByClassName()), but to no avail.

[einheit-de]

I ended up cleanly rewriting everything as a class based component.

import React from 'react';
import styles from './styles.module.css';
import Translate from '@docusaurus/Translate';
import ReactJkMusicPlayer from 'react-jinke-music-player';
import "react-jinke-music-player/assets/index.css";
import BrowserOnly from "@docusaurus/BrowserOnly";

export default class AudioPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      instance: null,
      options: {
        audioLists: this.props.playlist,
        defaultPlayIndex: 0,
        theme: "auto",
        autoPlay: false,
        defaultPosition: { top: 80, right: 80 },
        glassBg: true,
        remove: false,
        showPlayMode: false,
        showMediaSession: true,
        showDownload: this.props.downloadble,
        mode: "full",
        toggleMode: this.props.toggleMode || false
      }
    };
  }
  play = (e) => {
    this.setState({ open: this.state.open ? false : true })
    return this.state.open
      ? this.state.instance.pause()
      : this.state.instance.play()
  }
  render() {
    return <>
      <button
        onClick={this.play}
        className={styles.playButton}
      >{this.state.open
        ? <Translate id="buttonListenStop">⏸️ Pausieren</Translate>
        : <Translate id="buttonListen">🎧 Zuhören</Translate>} </button>
      <BrowserOnly>
        {() => {
          return <ReactJkMusicPlayer
            style={{ display: this.state.open ? "block" : "none" }}
            getAudioInstance={(instance) => { this.state.instance = instance }}
            {...this.state.options} />
        }}
      </BrowserOnly>
    </>
  }
}