Implementing the passed className in a component in NextJS: A step-by-step guide

When using next.js, the className is passed as props from parent to child component. The cardClassName and bgColor are both className props.

function Custom_Use_Cases({ caseData, cardClassName, bgcolor }) {
  return (
    <section className={use_case.use_case_section + ' '}>
      <div
        className={clsx(
          'cx-container',
          use_case.use_case_content,
          use_case[{ cardClassName }]
        )}
      >
        <p className={clsx(use_case.section_header_text)}>Use Cases</p>
        <div className={clsx(use_case.card_section)}>
         .
         .

        </div>
      </div>
    </section>
  );
}

EDIT

 <CustomUseCase
          caseData={use_case}
          cardClassName='cdn-use-case'
          bgcolor='blue-background'
  />

I have tried everything I could think of without success. Is there a solution that can make it work?

htmlcssnext.js

Answer №1

Let's illustrate this with an example:

In /index.tsx

import NewComponent from '../Components/NewComponent'

export default function index() {
  return (
    <div>
      <NewComponent classes='class-1 my class-2' />
    </div>
  )
}

Here, class-1 my class-2 are the class names that are passed to the child component NewComponent

In ../Components/NewComponent

import $ from '../Styles/card.module.css'

export default function NewComponent({ classes }: { classes: string }) {
  return (
    <>
      <div className={`${$.card} ${classes}`}>
        NewComponent renders nothing.
      </div>
    </>
  )
}

Accept the classes props from the parent as ({classes}) and use template literals to pass them to the desired location, in this case, a div element.

Below is a screenshot of how it appears in the browser---

https://i.sstatic.net/msgTA.png You can see that all the components are passed as props, including those from style sheets (here referred to as $)

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

display child element at full width within a parent element that is not full width

I have a container with a maximum width of 1024px, and I want one of its child elements to take up 100% width starting from the left edge of the screen. Is there a way to achieve this without adding extra HTML markup? I know I can make the child element 1 ...

htmlcsswidth

What is the best way to format MarkDown content within a nextJs environment?

Markdown-it is successfully converting markdown to html in my Nextjs project. However, I am facing a styling issue with specific elements such as h2, h3, ul, and li. Here's the code snippet: <h1 className="text-3xl mb-3 leading-snug d ...

cssnext.jsmarkdown

What are the methods to deactivate <Link href="" /> in Next JS based on different conditions?

Here is my code snippet for navigating to previous and next posts based on certain conditions: <Link href={/blog/${bdetails.id - 1}}> Prev Post <Link href={/blog/${bdetails.id + 1}}> Next Post Query: I am looking to navigate to the previous ...

javascriptnext.jshyperlink

Tips for extracting website language using Selenium in Python

When configuring the language in Selenium, I use: chrome_options.addargument("--lang=en"). During testing, I must verify that the language is indeed set to English. Perhaps I can confirm this by checking the value inside <html lang='... ...

pythonhtmlselenium-webdrivertagschrome-options

Attempting to incorporate images alongside menu items

Here is a list of menu items. Please take note that I have assigned the image class to the City menu item. <p:submenu label="Address"> <p:menuitem value="Country" url="/secured/country.xhtml?redirect=true" /> <p:menuitem value="Stat ...

htmljsfprimefaces

Determine the specific device being used in modern smartphones with ultra-high resolution in order to select the appropriate CSS file to execute

On stackoverflow.com, users often suggest using min-width and max-width to differentiate between smartphones and PCs (here, here, here and more). Here's an example: <link href="template.css" rel="stylesheet" type="text/css& ...

htmlcssresponsive-design

Having difficulty breaking down values from an object

Attempting to destructure the data object using Next.js on the client side Upon logging the data object, I receive the following: requestId: '1660672989767.IZxP9g', confidence: {…}, meta: {…}, visitorFound: true, visitorId: 'X9uY7PQTANO ...

javascriptobjectnext.jsdestructuring

When clicking on the HTML div element, it will be appended to the application

Within my vertical menu, there are 5 items including web design and mobile app. When clicked on these items, they reveal their respective href attributes as shown below. <div class="col-md-3"> <ul class="nav nav-tabs nav-stacked"> ...

javascripthtmlcss

Date Selector Tool for Input Field

Does anyone know how to change the color of the date picker that appears in certain browsers but is unsure about the selector's name? HTML: <form action="pledge.html" method="post"> <input type="date" id="birthday" name="user_bda ...

css

attempting to switch a container with a single click

I want to create a div container that expands and contracts each time an event handler is clicked. However, when the page loads, I have to click the event handler twice for it to expand the first time. After that, it works with just one click. Ideally, I&a ...

javascriptjqueryhtmltoggle

Pictures are overflowing from the table

I'm facing a challenge with my homework assignment... I am relatively inexperienced with HTML/CSS and can't seem to figure out why my images are overflowing from the table cells regardless of their sizes... Table snippet: <div class="secti ...

htmlcssimagehtml-table

What is the best way to create a dot animation using CSS or JavaScript?

https://i.sstatic.net/60Hym.gif This particular GIF is sourced from Dribbble. I attempted to create a demo using pure CSS. Below are snippets of my code: @keyframes circles{ 0%{ transform: scale(0) rotate(150deg); } 100%{ transform: scale( ...

javascriptcss

The magic of coding is in the combination of Javascript

My goal is to create a CSS animation using jQuery where I add a class with a transition of 0s to change the color, and then promptly remove that class so it gradually returns to its original color (with the original transition of 2s). The code below illus ...

javascriptjqueryhtmlcss

Django's background image remains static regardless of CSS changes

I recently downloaded an HTML template and am attempting to customize it by changing the background image within the CSS file. The current code in the CSS file is as follows: background: url(../img/background.jpg) Despite my efforts to replace it with t ...

pythoncssdjangopython-3.xstatic

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Imagine I have 2 main components, A and B. Now, component C needs to be created inside both A and B. How can I guarantee that the same exact instance of C is generated in both places? Essentially, I want them to stay synchronized - any changes made to one ...

javascripthtmlcssreactjscomponents

Best practice for sending intricate variables to JavaScript via HTML

Steering away from PHP's htmlentities, I made a change in my code: <?php echo '<img ... onclick="MP.view(\''.$i->name.'\') />'; ?> However, I decided to go a different route by JSON encoding the ...

phpjavascripthtmljson

Place a full-width block within a grid design

I am currently working on a page layout inspired by Google Images. It features a grid of images with a large full-width section underneath the selected image. I am interested to see if it is achievable using CSS properties like display: grid. https://i.ss ...

htmlcsscss-grid

Issue with Ajax when attempting to load new content into a div after submitting a form

After implementing the code below to submit a form and use ajax to load the action page into a div on the same page, I am encountering an issue where clicking submit results in a duplicate copy of the form appearing again. <script src="//ajax.googleapi ...

jqueryhtmlajax

Can a variable be used to search for a particular element within a JSON script?

Here's an example script that I need to modify to log the name Joe: const names = ` { "Joe": { "nat": "American", "hair": "brown" }, "Pet ...

javascripthtmljsonconsole.log

retrieving or submitting information using jquery and displaying the URL in the browser's address bar

So, I have a deadline looming tomorrow morning.. I'm currently working with jQuery, trying to load data from an external file. What I really need help with is figuring out how to load new data when I use $.post or $.get in jQuery. Sending a request ...

phpjqueryhtml.htaccess