nextjs how to write css variable in components module.css like global css?

Issue

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?

Solution

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.

Answered By – juanireyes

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.