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?

CodePudding user response：

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.