Estoy tratando de hacer un tema claro/oscuro. Y tengo 2 componentes. El primer componente es el siguiente. Logré hacer un booleano para cambiar mi estilo en mi componente. Fue bueno hasta ahora:
export interface Props{ theme:boolean; } const Theme: FC<Props> = ({theme}) => { const [light,setLightMode]=useState(false); return ( <div> <div className="card__theme"> <div className={light ? "card__light" : "card__light--active"}>Light</div> <Switch inputProps={{ "aria-label": "controlled" }} onChange={()=>setLightMode(!light)}/> <div className={ light ? "card__Dark" : "card__Dark--active"}>Dark</div> </div> </div> ); };Lo que hago ahora es usar este componente en mi página de inicio donde quiero hacer lo mismo. Quiero cambiar el estilo de mis componentes, haciendo 2 className como el código anterior con un estado booleano. El problema al que me enfrento es que no puedo hacer otra función onChange={} en mi componente de inicio. Primero, no envío en la interfaz una función. Quiero mi const [light,setLightMode]=useState(false); y mi función onChange={()=>setLightMode(!light)} cuando cambio el botón para trabajar en mi componente Inicio desde abajo
const Home: FC = () => { const percentage = 91; const [dark,setDark] = useState(false); return ( <div>2 <div className="Container-body"> <div className="card"> <div className={dark ? "card__theme" : "card__theme--active"}> <Theme theme={dark} onChange={()=>{setDark(!dark)}}/> </div>Así que para que sea ordenado. Quiero usar solo el estado booleano light, setlightTheme de mi componente Theme en mi componente Home. No sé cómo puedo enviar esto con accesorios en TypeScript...
Aquí hay una impresión con mi código: ingrese la descripción del enlace aquí
No estoy seguro de haber entendido correctamente, pero creo que su objetivo es pasar la función onChange al componente Theme desde el componente principal. Si es así, espero que este fragmento pueda ayudarte. Básicamente, agregué el parámetro onChange en la interfaz como una función. También cambié el nombre del parámetro del tema a oscuro. Para que los dos componentes funcionen juntos, eliminé useState en el componente Theme y usé la variable oscura (tomada del componente principal) para administrar los estilos.
export interface Props { dark: boolean; onChange?: () => void; } const Theme: FC<Props> = ({ dark, onChange }) => { return ( <div> <div className="card__theme"> <div className={dark ? 'card__light' : 'card__light--active'}> Light </div> <Switch inputProps={{ 'aria-label': 'controlled' }} onChange={onChange} /> <div className={!dark ? 'card__Dark' : 'card__Dark--active'}>Dark</div> </div> </div> ); };Entonces, si entiendo correctamente, solo desea proporcionar una opción para cambiar el modo claro y oscuro. Desde un punto de vista arquitectónico, no desea hacer esto a nivel de componente, ya que es posible que sea necesario cambiar varios componentes.
Antes de abordar una solución adecuada, actualmente está cometiendo un error BEM con esta línea:
<div className={dark ? 'card__light' : 'card__light--active'}> Un modificador --modifier sólo puede convivir con una card elemento real. Entonces, en un HTML completamente generado, esto es válido card__light card__light--active pero en su ejemplo se card__light o card__light--active .
Cuando se trata de cambiar un tema oscuro/claro, desea que este valor (verdadero o falso) esté disponible en un estado centralizado usando algo como Redux o puede declararlo en su componente raíz (la mayoría de las veces el <App /> ) y comience a usarlo desde allí.
No recomiendo la perforación de accesorios para este caso de uso, ya que hará que su código se ensucie a largo plazo. Este es un caso de uso muy bueno para la API de contexto .
✅ Ver ejemplo de trabajo Playground .
PD: uso Typescript para un mejor código, puede ignorar la sintaxis que no conoce.
La documentación de React tiene un ejemplo exacto para ver el cambio de tema de documentos .