¿Es posible localizar los estilos globales de un módulo en un solo archivo?
por ejemplo, me gustaría cambiar el ancho de un elemento de un módulo de reacción, pero solo para un archivo. los estilos en línea no son posibles:/
edite para el contexto: en mi caso particular... estoy usando 'react-multi-carousel'... y para repasar el comportamiento del punto de interrupción, configuré .react-multi-carousel-item { width: 310px !important; } . Sin embargo, me gustaría que este estilo se aplique solo a un componente y no a todo mi proyecto (estoy usando el carrusel en más de un lugar). ¿Alguna forma de localizar un estilo global (archivo CSS)?
Simplemente anida la regla CSS para que solo se aplique cuando esté dentro de un contenedor específico:
.my-container .react-multi-carousel-item { width: 310px !important; }Y luego en Reaccionar:
return <> <MultiCarousel /> <div className="my-container"> <MultiCarousel /> </div> </> En ese ejemplo, el primer <MultiCarousel /> no vería el estilo extra, pero el segundo sí.
"¿Hay alguna forma de agregar css dentro del archivo TSX por casualidad? Si es posible, me gustaría no tener un archivo css externo".
Podría probar una etiqueta de estilo con ámbito
Por ejemplo:
return <> <div> <style scoped>{` .react-multi-carousel-item { width: 310px !important; } `}</style> <MultiCarousel /> </div> </>