Espero que esta sea una pregunta simple. Estoy tratando de cambiar el tamaño de un componente que importé.
Específicamente, me gustaría poder establecer una altura y un ancho en CSS para este componente. Sin embargo, agregar un nombre de className y apuntar a esa class en CSS o intentar diseñar el div principal no hace absolutamente nada para el Componente.
El componente al que me refiero es: <DarkModeToggle/> Hay una propiedad size={} disponible en el Componente, pero solo acepta un único valor, me gustaría poder usar Media Queries en CSS en su lugar.
Obtuve el paquete npm de aquí .
import React from 'react'; import {DarkModeToggle} from 'react-dark-mode-toggle-2'; import '../style.css'; function App() { const [isDarkMode, setIsDarkMode] = React.useState(false); return ( <nav className="navbar"> <div className="nav-flex"> <div className="brand">devfinder</div> <div className="light-toggle"> <DarkModeToggle onChange={setIsDarkMode} isDarkMode={isDarkMode} size={80} /> </div> </div> </nav> ); } export default App;Puedes ver el problema que tengo en esta imagen.
¡Gracias chicos!
¿El DarkModeToggle que está utilizando es un componente reutilizable inyectado? Y deduzco que intentaste diseñar 'DarkModeToggle' en CSS. Sé que la práctica de !important no siempre es una buena ética, pero tal vez eso funcione. ... ¿intentó agregar un espacio y px como el que se muestra a continuación, incluso si el renderizado de px está predeterminado, y en su @media lo cambió para que sea más pequeño que 80?
size={80 px}Encontré esta fuente en github donde se configura el componente y se inyecta. Espero que encuentres tu solución.