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, Jun 10 '22 at 01: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, Jun 10 '22 at 02: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, Jun 10 '22 at 02:48
There are a few ways - https://stackoverflow.com/questions/40779623/how-to-use-global-variables-in-css-modules — Sean W, Jun 10 '22 at 03:06

score 3 · Accepted Answer · answered Jun 10 '22 at 01:45

3

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 '22 at 01:45

DrunkOldDog

718
5
12

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 Jun 10 '22 at 01:53
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 Jun 10 '22 at 02:48
You can call it as in your normal global stylesheet using variables. Like this: `.container section { padding: 20px; color: var(--primary); }`. – DrunkOldDog Jun 10 '22 at 03:29

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

1 Answers1