In our global css file we can write css like this
: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%;
}
But we can't write this css in our components module.css. I need to write .section instead of section but my style will be broken if I write .section instead of section in my component module.css. is there any way I can write those css in my module.css like global css?
And it also painful and time consuming to apply custom style in our component like this {style.ClassName}. is there any easy or quick way for apply custom style in our component?
What you could do is wrap all of the code in your specific component inside a module class. Something like this:
<div className={style.container}>
{/* All of your code comes here */}
<section>
{/* Your section code */}
</section>
</div>
And then in the container class in your css module you can do something like this:
.container section {
padding: 20px; // or the styles you want to apply
}
This will apply the styles to all of the sections inside the .container css module class.
And for your second question, if you don't want to apply css modules I would encourage you to try other styling approaches such as styled-components.