如何通过引用状态更改元素的样式？

<button id="myButton" style="background-color: blue; color: white;">Click me</button>

<button id="myButton" class="default-style">Click me</button>

.default-style {
  background-color: blue;
  color: white;
}

.active-style {
  background-color: red;
  color: white;
}

document.getElementById('myButton').addEventListener('click', function() {
  this.classList.toggle('active-style');
});

<button id="myButton">Click me</button>

:root {
  --button-bg-color: blue;
}

#myButton {
  background-color: var(--button-bg-color);
  color: white;
}

document.getElementById('myButton').addEventListener('click', function() {
  document.documentElement.style.setProperty('--button-bg-color', 'red');
});

import React, { useState } from 'react';

function ButtonComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      style={{ backgroundColor: isActive ? 'red' : 'blue', color: 'white' }}
      onClick={() => setIsActive(!isActive)}
    >
      Click me
    </button>
  );
}

export default ButtonComponent;

<template>
  <button :style="{ backgroundColor: isActive ? 'red' : 'blue', color: 'white' }" @click="toggleActive">
    Click me
  </button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>