En nuestro archivo css global podemos escribir css como este
:root{ --orange:#e67e22; --black:#333; --light-color:#777; --border:.1rem solid rgba(0,0,0,.2); --box-shadow:0 .5rem 1rem rgba(0,0,0,.1); } *{ margin:0; padding:0; box-sizing: border-box; outline: none; border:none; text-decoration: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: lighter; } html{ font-size: 62.5%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 6rem; } section{ padding:2rem 7%; }Pero no podemos escribir este css en nuestro module.css de componentes. Necesito escribir .sección en lugar de sección, pero mi estilo se romperá si escribo .sección en lugar de sección en mi componente module.css. ¿Hay alguna manera de que pueda escribir esos css en mi module.css como css global?
Y también es doloroso y lleva mucho tiempo aplicar un estilo personalizado en nuestro componente como este {style.ClassName} . ¿Hay alguna forma fácil o rápida de aplicar un estilo personalizado en nuestro componente?
Lo que podría hacer es envolver todo el código en su componente específico dentro de una clase de módulo. Algo como esto:
<div className={style.container}> {/* All of your code comes here */} <section> {/* Your section code */} </section> </div>Y luego, en la clase de contenedor en su módulo css, puede hacer algo como esto:
.container section { padding: 20px; // or the styles you want to apply } Esto aplicará los estilos a todas las secciones dentro de la clase del módulo .container css.
Y para su segunda pregunta, si no desea aplicar módulos css, lo animo a que pruebe otros enfoques de diseño, como componentes con estilo .