Tengo un botón de arranque que alterna algunos diseños CSS para mi sitio web cuando se hace clic. Lo estoy usando para cambiar el fondo del sitio web a través de un JS simple para alternar la clase. Sin embargo, cuando el botón está activo, obtengo un comportamiento realmente extraño en el que cambia el tamaño y el color de mi botón.

Si el botón es negro y grande, en activo se reduce a pequeño y blanco. Al hacer clic, vuelve al estado correcto.

archivo SASS

 .dark-mode #Homepage //ID for div that holds all elements on this page background: #202020 color: white .press // ID for custom buttons color: white .press:hover color: white text-shadow: 2px 3px 5px #d3d3d3ab .quote-widget //custom element color: black background: #e6e6e6c7

reaccionar archivo js

 /* toggleTheme() function which will change between light and dark mode */ function toggleTheme() { var el = document.body; el.classList.toggle("dark-mode"); // toggle class of object with corresponding class } //inside the functional component: {/* Toggle theme button */} <div className='theme-widget'> <button onClick={toggleTheme} id="swap" className="toggle-theme">{'\u25D1'}</button> </div>