Quiero cambiar el color de fondo cambiando el ancho de la página escribiendo condicionalmente, pero para hacer esto necesito poder acceder a los estilos
Si quisiéramos escribir este código en JavaScript, sería así:
document.getElementById("number1").style.backgroundColor="red";Pero, ¿y si queremos escribir este código con React y un método funcional?
Le sugiero que lo haga con el código css simplemente usando media-query.
#number1 { @media screen and (min-width: _yourBreakpoint_) { background-color: "red"; } }Documentos: https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Sin embargo, si desea cambiar dinámicamente el estilo a través de reaccionar, puede usar el accesorio de style del elemento. Suponiendo que el elemento es un div, simplemente puede hacer:
<div style={{ backgroundColor: width > breakpoint && "red" }}></div>Documentos: https://reactjs.org/docs/dom-elements.html#style
Podría escribir class .backgroundRed y simplemente usar clases de condición como:
className={width > breakpoint ? '.backgroundRed' : '.elseClass'}o puede escribir estilos directamente con el atributo de estilo:
style={condition ? {backgroundImage: 'red'} : {} }no tiene que cambiar los estilos con javascript, simplemente puede agregar una consulta de medios a sus estilos, para sus dispositivos de destino como:
/* this is for tablets */ @media only screen and (min-device-width: 768px){ #number1{ background-color: 'red'; } }