Tips for expanding css modules within next js

I am new to working with Next.js and I have a query regarding CSS modules

I currently have a Product component structured as follows:

import styles from "./Product.module.css"
function Product({className=""}) {
  return (
    <div className={`${styles.container} ${className}`>
      <p className={styles.title}>product</p>
    </div>
  )
}

Now, I am looking to create a new component called ProductCard which utilizes the Product component but requires extending the style of the p tag inside it:

import styles from "./ProductCard.module.css"
function ProductCard() {
  return (
    <div className={styles.container}>
        <Product className={styles.product}/>
    </div>
  )
}

How can I incorporate the styling of the p tag in my Product component using a className provided by ProductCard?

cssreactjsnext.jscss-modules

Answer №1

To enhance the functionality, it is essential to introduce a new custom property and pass it to the p element. Utilizing an object will provide the flexibility to transfer any property to the p element. For more information, refer to React's documentation on props in JSX, MDN spread syntax, and nullish coalescing operator.

function Product({ className, titleProps, ...rest }) {
  return (
    <div className={`${styles.container} ${className ?? ''}`} {...rest}>
      <p {...titleProps}>product</p>
    </div>
  );
}

function ProductCard() {
  return (
    <div className={styles.container}>
      <Product
        className={styles.product}
        titleProps={{ className: styles.title }}
      />
    </div>
  );
}

Answer №2

import styles from "./UniqueProduct.module.css"
function UniqueProduct({customClass=""}) {
  const classes = {
      'unique': `${styles.unique}`
  }
  return (
     <div class={`${styles.wrapper} ${classes[customClass]}`}>
        <p className={styles.heading}>unique product</p>
     </div>
  )
}

import styles from "./UniqueProductCard.module.css"
function UniqueProductCard() {
  return (
      <div class={styles.wrapper}>
          <UniqueProduct customClass='unique' />
      </div>
  )
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A div housing a jQuery progress bar within an unordered list (ul)

Having an issue incorporating a jQuery progress bar into a ul li tag. <ul> <li> <a href="test">test</a> <div id="progressbar"></div> </li> </ul> I have set display: block for the anchor tag and ...

jquerycsslisthtml

My state is not functioning as expected and is displaying as undefined

I am encountering this errorIt shows me an error stating that the variable is not defined. How can I resolve this issue? Is there a method that I can utilize? const [indication, setindication] = React.useState({ venous: "", flutter: &quo ...

reactjsreact-hooksmaterial-ui

ReactJS Chatkit has not been initialized

I made some progress on a tutorial for creating an Instant Messenger application using React and Chatkit. The tutorial can be found in the link below: https://www.youtube.com/watch?v=6vcIW0CO07k However, I hit a roadblock around the 19-minute mark. In t ...

javascriptreactjsreact-routerchatkit

What is the best way to increase padding beyond p-5 for specific screen sizes?

I need help creating a webpage that is responsive in design. Below is a snippet of the specific section I am working on: <div class="container-fluid"> <div class="row p-3 p-lg-5"> <div class="col"&g ...

htmlcssbootstrap-5

Having an issue with CSS button borders not functioning as expected for some unknown reason

My CSS button has a border added, but it doesn't seem to be showing up. Can anyone provide suggestions on how to fix this issue? Below is the snippet of the code: body { background: grey; } a.button { display: inline-block; -webkit-appearanc ...

htmlcssbootstrap-4

The _app pageProps object returned from getInitialProps is only populated on the home route "/" and is empty on all other routes

I have encountered a challenge while trying to conditionally display a Next.js component based on API data fetched in getInitialProps within _app.js: MyApp.getInitialProps = async (context: AppContext): Promise<AppInitialProps> => { const respon ...

next.js

Exploring the optimal approach to implementing rel=canonical on your NextJS website index page

I am currently dealing with an issue on my website . Google has indexed the "/index" page, which I mistakenly added to the sitemap.xml file. As a result, Google Search Console is flagging it as a duplicate of "/" and indicating that there is no canonical U ...

next.jsgoogle-search-consolecanonical-link

Tips for aligning a Bootstrap container in the middle of the viewport vertically

I'm struggling to center a Bootstrap container vertically in the viewport. You can view my code at http://www.bootply.com/C8vhHTifcE All of my attempts at centering have been unsuccessful. Does anyone have a solution? Just to clarify: I want the co ...

htmlcsstwitter-bootstrap

When navigating to different routes, req.isAuthenticated() returns false and the passport component of the session is lost

Front-end: React with React-router + axios Back-end: express with express-session, passport, passport-local, passport-local-mongoose To ensure 24-hour login sessions and utilize the isAuthenticated() method from passport-local for user verification, I am ...

reactjsexpressexpress-sessionpassport-localpassport-local-mongoose

When attempting to use npm start on a Mac, an error was encountered stating "package.json' file or directory does not exist"

After running the npm start command, an error message is displayed: Error: ENOENT Syscall Error: Open File Path: /Users/kratichoudhary/package.json Error Number: -2 Error Description: ENOENT - no such file or directory found at '/Users/kratichoud ...

node.jsreactjsnpm

Error: Trying to access the 'blogpost' property of an undefined variable results in a TypeError while executing the NPM RUN BUILD command in Next.js

Encountering a frustrating issue while trying to run my Next.js application for production build. The problem seems to be related to the "blogpost" parameter in the following codeblock: import React from "react"; import Slab from "../../comp ...

typescriptnext.jsvercel

Utilizing nested tables to customize the appearance of cells within the primary table layer

I am facing a challenge with styling nested tables on my page. Specifically, I need to apply styles exclusively to odd rows of the top level table without affecting the tables within it. Unfortunately, I am unsure about how to accomplish this task. My ini ...

jquerycss

Fatal error: zoid has obliterated all components inreactjs nextjs

I recently integrated PayPal into my Next.js application. Everything loads fine when I first visit the page, but if I navigate away and then back, it throws an error: unhandled_error: zoid destroyed all components↵ Unfortunately, PayPal does not provid ...

reactjspaypalnext.js

What is the best way to position my Jchartfx area graph below my gridview?

When my page loads, the graph appears like this. It consistently shows up in the top left corner even though it should be positioned underneath the grid view as intended. var chart1; function createGraph(mpy) { if (mpy == undefined) mpy = 12.00; ch ...

javascriptjqueryhtmlcssjchartfx

I am experiencing an issue where the CSS file in the wwwroot directory does not update when I make changes to the code in ASP.NET MVC

Here is a link to my CSS file: Click here for image description This is how the file looks when built (no changes): Click here for image description Occasionally, running "clean-solution" and "build-solution" fixes the issue, but it's not working no ...

c#cssasp.net-mvcuploadwwwroot

Tips for recognizing a specific object ID within an array in order to modify the status of an element within that object

My goal is to accurately identify a specific panel within an expanded array and link that panel's ID to a button, while also ensuring the button is disabled when no panels are expanded or more than one panel is expanded. However, I am encountering iss ...

javascriptreactjsmaterial-ui

Sorting through: A producer submerged yielded a fresh outcome *while also* revising its initial version. Opt to yield a fresh outcome *or* revamp the initial version

In my project, I am using an API to retrieve user data from the database. The API response includes two variables - "isActive" and "isVerified". These variables help me determine how to display the data on the interface. If both variables are false, it me ...

reactjsredux-toolkit

"Unresolvable Promise: Stripe's Payment Intent Creation Always Hits a Dead End

After signing up for my Stripe account, I decided to take a shot at integrating it with Node.js. Following the simple steps, I installed the necessary package and gave payment Intents a test run using my test key: const Stripe = require('stripe') ...

reactjsnpmstripe-paymentsstrip

Expanding and collapsing nested lists vertically with React

In my React.js component, I have a setup where I am displaying states and their respective districts. The list displays correctly as intended. However, my issue is that when I click on any state, only the sublist of that specific state should display, not ...

reactjs

Employing useEffect within Material-UI tabs to conceal the third tab

At the page's initial load, I want to hide the first two tabs. The third tab should be visible with its content displayed right away. Currently, I can only see the content after clicking on the third tab. To troubleshoot this issue, I attempted to use ...

javascripthtmlreactjsreduxreact-hooks