为什么我在react中使用简单的复选框而不是切换开关

Question

我正试图使用引导程序中的开关来切换以启用暗模式，但在保存了相同的代码后，结果是一个简单的复选框。我从文档中读到，在较旧的辅助技术中，它(开关元素(将被简单地作为一个常规复选框宣布为后备选项。

我应该在引导程序元素或类中更新或更改什么以获得所需的切换开关？

这是我使用的：

<div className="form-check form-switch text-light">
<input
className="form-check-input"
type="checkbox"
role="switch"
id="flexSwitchCheckDefault"
/>
<label
className="form-check-label"
htmlFor="flexSwitchCheckDefault"
>
Enable Darkmode
</label>
</div>

Answer 1

我似乎使用了一个过时的Bootstrap版本。将CDN链接和脚本更改为最新版本的引导程序有帮助。

Answer 2

像符咒一样工作：

<div class="form-check form-switch text-light">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Enable Darkmode</label>
</div>