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 ponents 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 ponent 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 ponent like this {style.ClassName}. is there any easy or quick way for apply custom style in our ponent?

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 ponents 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 ponent 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 ponent like this {style.ClassName}. is there any easy or quick way for apply custom style in our ponent?

• javascript
• css
• reactjs
• next.js

Share Improve this question Follow edited Jun 10, 2022 at 1:41 hawaj asked Jun 10, 2022 at 1:21 hawajhawaj 29855 silver badges1515 bronze badges 4

• 2 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 Commented Jun 10, 2022 at 1:50
• 1 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 Commented Jun 10, 2022 at 2:19
• @Sean W can you show me an example how to call global css variable in ponents 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 Commented Jun 10, 2022 at 2:48
• 1 There are a few ways - stackoverflow./questions/40779623/… – Sean W Commented Jun 10, 2022 at 3:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

What you could do is wrap all of the code in your specific ponent inside a module class. Something like this:

<div className={style.container}>
 {/* All of your code es 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-ponents.