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

Question

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?

Let assume we write this css in our global css html{font-size: 62.5%;} and also write css vaiable :root{--orange:#e67e22;} now how to write exactly this CSS in our module.css? If I write :root or html in my module.css then I will get error. — hawaj
– hawaj, Commented Jun 10, 2022 at 1:50
It's throwing an error because you shouldn't directly target HTML tags in a CSS module - it defeats their purpose. You should add a class name to the parent element like the answer from @juan or make a global stylesheet and apply the styles there like you want :root. You can call CSS variables in modules by using color: var(--orange); — Sean W
– Sean W, Commented Jun 10, 2022 at 2:19
@Sean W can you show me an example how to call global css variable in components module.css ? :root { --primary: "red"} my global css. How to call this css variable in my module.css ? like this style in my module.css .container section {padding: 20px;color:"red";} — hawaj
– hawaj, Commented Jun 10, 2022 at 2:48
There are a few ways - stackoverflow.com/questions/40779623/… — Sean W
– Sean W, Commented Jun 10, 2022 at 3:06

DrunkOldDog · Accepted Answer · 2022-06-10 01:45:39Z

4

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 Jun 10, 2022 at 1:45

DrunkOldDog

7481 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hawaj Over a year ago

thanks for your answer but you might be misunderstood my question. Let assume we write this css in our global css html{font-size: 62.5%;} and also write css vaiable :root{--orange:#e67e22;} now how to write exactly this CSS in our module.css? If I write :root or html in my module.css then I will get error.

hawaj Over a year ago

how to call global css variable in components module.css ? :root { --primary: "red"} my global css. How to call this css variable in my module.css ? like this style in my module.css .container section {padding: 20px;color:"red";}

DrunkOldDog Over a year ago

You can call it as in your normal global stylesheet using variables. Like this: .container section { padding: 20px; color: var(--primary); }.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related