How can I declare CSS variables in Next.js components' module.css just like in global CSS?

Question

How can I declare CSS variables in Next.js components' module.css just like in global CSS?

When writing CSS in our global file, we often define variables and styles 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%;
}

However, when it comes to writing CSS in our component module.css, things are a bit trickier. For instance, using .section instead of section can cause style discrepancies. Is there a way to apply global styles to our components without running into these issues?

In addition, manually applying custom styles to components can be tedious and time-consuming, especially when utilizing {style.ClassName}. Is there a simpler or quicker method for styling components with custom CSS?

javascript css reactjs next.js

Answer 1

Answer №1

To enhance the styling of your specific component, consider enclosing all of its code within a module class. Here's an example:

<div className={style.container}>
 {/* Insert your code here */}
 <section>
  {/* Code for section */}
 </section>
</div>

In the container class of your CSS module, you can define styles like this:

.container section {
  padding: 20px; // Customize with your desired styles
}

These styles will be applied to all sections within the .container CSS module class.

If you prefer not to use CSS modules, you may explore alternative styling methods such as styled-components.

Answer 2

To enhance the styling of your specific component, consider enclosing all of its code within a module class. Here's an example:

<div className={style.container}>
 {/* Insert your code here */}
 <section>
  {/* Code for section */}
 </section>
</div>

In the container class of your CSS module, you can define styles like this:

.container section {
  padding: 20px; // Customize with your desired styles
}

These styles will be applied to all sections within the .container CSS module class.

If you prefer not to use CSS modules, you may explore alternative styling methods such as styled-components.

How can I declare CSS variables in Next.js components' module.css just like in global CSS?

Answer №1

Similar questions

AJAX requests sent from different origins to AWS S3 may encounter CORS errors on occasion

"Displaying a popup message prompting users to refresh the page after clicking

The div element continuously wraps its content when the browser size is reduced

CSS not being applied to certain HTML elements due to an error in implementation

Updating the node startup file with Visual Studio 2015 using NodeJS/Typescript

Distinguishing Design with CSS3

Learning about a basic sorting algorithm that analyzes and compares different values

React: Importing functions from other files is not allowed

Get Python CSV file with Callback feature

React and Material UI: Ensuring Proper Whitespace Handling in Strings

Ways to ensure a video completely fills the frame

Guide to passing a dynamic value to a CSS class and customizing it in Material UI within a React application

Blur Event Triggered in Primefaces Editor

Is it time to execute a mocha test?

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

Next.js v13 is experiencing issues with Crypto.randomUUID() function

An error occurred when trying to set a cookie using Set-Cookie in a react application

The function window.alert() has not been implemented in jest

How to verify the parent nodes in a jstree

Unable to configure slick carousel to a 12-column grid in Bootstrap