点击按钮时.is-toggled样式不生效的问题求助

大家好，我碰到个小问题想请教下各位：我给按钮加了点击切换.is-toggled类的逻辑，现在能确认点击时这个类确实被正确添加/移除了，但对应的样式就是不生效，按钮外观完全没变化，这可愁坏我了😅

以下是我目前写的代码：

CSS 代码 #

.is-toggled {
  background-color: lightgray;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.gaming-btn {
  background-color: black;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

HTML 代码 #

<button class="gaming-btn" onclick="
     const btn = document.querySelector('.gaming-btn');

      if(btn.classList.contains('is-toggled')) {
        btn.classList.remove('is-toggled')
      } else {
        btn.classList.add('is-toggled');
      }
    ">Gaming</button>

有没有大佬能帮我看看问题出在哪，怎么才能让.is-toggled的样式正常生效呀？

备注：内容来源于stack exchange，提问作者Monish M