How to use multiple class names with Next.js module CSS

Currently, in my project I am utilizing Next.js along with module.css. However, I have encountered an issue. There is a "button" component nested inside another component. I am trying to apply both a normal className and Style.myClass to this button component. Is there a way to achieve this?

Apologies if the question seems a bit complex, the example below should provide better clarity

<Button className={(Style.MyModuleCssClass, "my-global-class")}
        size={"large"}
        type={"primary"}> GET MORE
</Button>

Is it possible to have code structured like this? Where one class is global and the other is from module.css

cssreactjsnext.js

Answer №1

Having multiple class names is not an issue, but it is usually best practice to concatenate them as if performing a string operation.

  <Button className={`${Style.MyModuleCssClass} my-global-class`} />

Unless you have a utility library to assist you, check out https://github.com/JedWatson/classnames#readme

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

Missing style in the grid system when customizing Bootstrap download

I simply want to incorporate the grid system from Bootstrap into my project, so I downloaded the Bootstrap grid from this source. However, I noticed that some styles were missing from that file. Original bootstrap.css .row { display: -ms-flexbox; ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to create a flexbox that combines a centered fixed child with a fixed child at the bottom?

I'm trying to create a layout using flexbox that looks like this: | | | | | CENTER FIXED ELEMENT | | | | BOTTOM FIXED ELEMENT | Here is the flexbox CSS I've attempted: .wrapper{ ...

htmlcsslayoutflexbox

Ways to adjust the location of the scrollbar using CSS

Can the position of the scroll bar be modified using CSS to switch it from left to right or from bottom to top? ...

htmlcssscrollbar

Encountering an application error - despite working perfectly during development, I am now receiving an error message post deployment on Heroku

I encountered an issue while attempting to deploy my application to Heroku. The error message I received was: An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do ...

node.jsreactjsherokudeploymentmern

Show the saved email message text on an HTML webpage

Is there a way to show the email content stored in a HTML page? $.ajax({ type: "POST", url: "./mailBody.php", dataType: 'json', success: function (data) { $.each(data, function(index, element) { $('.mail ...

phpjqueryhtmlcss

The authentication process of OAuth2 in React is malfunctioning whenever a request is being dispatched

Trying to implement social authentication for my React site using Django Rest Framework (DRF) on the server side. I opted for the react-oauth2/google library instead of the deprecated react-google-login npm package. The issue I encountered is that react-go ...

reactjsdjangoreact-nativegoogle-chromedjango-rest-framework

Provide alternative styling through css in instances where the Google Books API does not provide an image

How can I modify the CSS code to display the author and title of a book when there is no image available from the Google Books API? Currently, users see a custom image linked here, but it's not clear what it represents without the name and author inf ...

javascripthtmlcss

Error TRPCClient: The unexpected presence of the token "'<'", ""<!DOCTYPE "... invalidates the JSON format within Next.JS

Encountering an error in the authentication call back page: TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON in Next.JS. The issue occurs in src/app/auth-callback/page.tsx and here's the relevant code ...

reactjstypescriptauthenticationnext.jstrpc

Instantaneous data refresh using Firebase Cloud Functions

Currently, I am working on developing a chat feature in React using Firebase cloud functions. However, I am facing an issue where I do not receive updates when a user sends a message. Below is the code snippet that I have been working with: const app = a ...

javascriptreactjsfirebase-realtime-databasegoogle-cloud-functions

React fetch encountered an issue when attempting to connect to the API using the specified IP address

I'm encountering an issue with my react-native fetch request where a new object is not being created in our mongodb database. However, the request goes through successfully when made through postman, indicating that the express route is functioning pr ...

reactjsreact-nativeexpress

Animate the CSS with a delay using styled-components

Is it possible to delay the opacity to zero when a certain condition is met? The loader bar is controlled using JavaScript, but can this delay be achieved using CSS alone? const Wrap = styled.div` background: #ddd; width: 100px; height: 10px; bord ...

javascriptcssreactjs

Callback in React Setstate triggered, leading to a delay in rendering

Recently, I embarked on a journey to learn React just 2 days ago. Despite my enthusiasm, I have encountered some challenges with React's setState method. As far as my understanding goes, I should utilize the prevState parameter when I need to alter th ...

javascriptarraysreactjssetstate

Is there a way to utilize the map function for iterating over data in Immutable.js?

How to Fix Unexpected Token Input Error: let type = ["categories", "people", "organization"]; let tab = filterCache.map((name) => type.forEach((i) => <Tab>{name[i]} (1)</Tab> ) ); The code is returning an error: Unexpec ...

reactjsreactjs-fluxreduximmutable.js

enhancing the appearance of the selected radio button with a pop of color

Is there a way to dynamically change the background color of an active radio button in React? I've attempted to implement this using a conditional statement, but it's not working as expected. What could be causing the error message "Cannot read p ...

reactjsreact-hooks

The task of obtaining the remote.origin.url failed as it requires a git repository with a configured origin remote or the 'repo' option must be set

While working on my weather application, I encountered an issue when using the npm run deploy command in the terminal. The error message I received was: Failed to get remote.origin.url (task must either be run in a git repository with a configured origin ...

reactjsgitgithubnpm

Automatically expand all PrimeNG Accordion panels for easy printing purposes

I've implemented the PrimeNG library's accordion component in my angular project. You can find more information here. In my template, I have some custom css styling for printing the page that looks like this: @media print { .profile-progress ...

cssangulartypescriptmedia-queriesprimeng

What is the best way to enable the noWrap feature for a Typography component that is within an Alert or AlertTitle component?

My goal is to have a Typography component truncate overflowing text with an ellipsis. However, I am facing an issue where this doesn't work when the Typography component is nested inside an Alert component. Below is a snippet of the code in question: ...

javascriptreactjsmaterial-ui

How can I prevent a nested Table from inheriting the style of the parent table?

Just to clarify, I'm not using tables or any other styling methods like that on my page. I have a simple table that lists services, prices, and PayPal buttons for adding to the cart. While everything is functioning properly and looks good, there are ...

csscss-tables

Is there a way to eliminate the blue formatting on my phone?

I've encountered a styling issue on my website when viewing it on mobile, specifically with links on iPhone. I've already attempted the solutions mentioned in this discussion: How do I remove the blue styling of telephone numbers on iPhone/iOS? ...

htmlcss

How to reset or clear the RangePicker in Ant Design for React

I am working with a component similar to this one and I am looking for a way to make it automatically reset after the user selects a date. Currently, once a date is selected, it remains as is until manually cleared. Current behavior: https://i.sstatic.ne ...

javascriptreactjsdateantd