The CSS does not get applied to the returned element in Next JS

When I create a function to return a DOM element with an associated className, the local style doesn't seem to be applied. For example:

export default function thing(){
    const elem = function(){
        return (<div className="myCss">Hello</div>)
    }
    
    return(
        <>
            { elem() }
            <style jsx>{` .myCss{ color:#f00 } `}</style>
        </>

    )    
}

I expected that elem() would return an element that inherits the style associated with the .myCss class. However, it doesn't work as expected.

Answer №1

Typically, styled-jsx transpiles the style names by default, resulting in dynamic styles like .mycss-123. If you want to preserve .myCss, simply add global to your code. Additionally, make sure to remove any spaces from your template string.

Following these steps will ensure that everything works as expected.

<style jsx global>{`.myCss{ color:red }`}</style>

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

Learn how to implement RSS into your Next.js MDX Blog by integrating the `rss` module for Node JS. Discover the process of converting MDX content to HTML effortlessly

Having trouble converting MDX to HTML at the moment. This task is for Tailwind Blog You can find the complete code on Github here → https://github.com/tailwindlabs/blog.tailwindcss.com Below is the relevant code snippet: scripts/build-rss.js import fs ...

The reverse of the alt text is displayed

Utilizing a right-to-left language with dir='rtl' on the body element. This causes the entire page to flow correctly from right to left. However, the alt text within images is showing up in reverse for some reason. Check out this jsFiddle link ...

I'm having trouble with the colors not displaying correctly on my NextJS Tailwind navbar

I've encountered an issue with my navbar where none of the specified colors are being displayed. The code snippet for the navbar is as follows: Codes: 'use client' import Head from 'next/head'; import Link from 'next/link&apo ...

steps for setting up babel-cli and babel-preset-react

I attempted various methods of installing babel-cli babel-preset-react Here's what I tried: npm install --save-dev babel-cli babel-preset-react However, when I run babel -h An error message appears saying The program 'babel' can be found ...

What is the method for assigning a value to a Material UI text field?

Trying to create an autocomplete search feature using EsriGeocode and Material UI. The form includes Street name, City, State, and Zip code fields. Currently facing an issue where the Street name text field displays the entire address instead of just the s ...

Outdated state variable value recorded in the log

I am facing an issue where the logged value of the state variable 'count' is always zero, even after clicking the button to update it. The logging function is triggered by a setInterval function within the useEffect hook. Is there a reason why t ...

What is the best way to eliminate the gap between these two div elements?

There's a gap between two divs in my HTML that I can't seem to remove. Here are the relevant CSS styles: #tab-2-content { display: grid; grid-template-rows: 1fr 2fr; width: 70%; margin: 0 auto; grid-gap: 0; } ... (CSS code continues) ...

What are the top techniques for designing with Angular 2 Material Design?

As a newcomer to angular 2 material design, I have noticed the primary, accent, and warn classes that apply specific colors to elements. Are these the only styling options available in Angular Material 2? Are there other classes that can be utilized for cu ...

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. Here is an example ...

React-icons version 4.4.0 has been found to contain a total of 6 critical

# npm audit report nth-check <2.0.1 Severity: high Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr fix available via `npm audit fix --force` Will install <a href="/cdn-cgi/l/email-protectio ...

Trouble with Displaying Table Outside of Div in Internet Explorer

As a UI developer, I encountered an issue where the table inside two divs is not displaying correctly in IE8. It works seamlessly in Firefox, but IE is causing me headache. If anyone has any suggestions or advice on how to fix this, please help me out. Yo ...

Fading Out with JQuery

My page contains about 30 same-sized divs with different classes, such as: .mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures { background:rgba(0, 0, 0, .30); float:left; position:relative; overf ...

The React application deployed on Heroku is experiencing difficulties when trying to send a POST request

While experimenting with the Chatkit API, I encountered an issue when deploying a React app to Heroku. Everything worked perfectly on my local machine, but upon pushing it to Heroku, I started receiving errors such as "Failed to load resource: net::ERR_CON ...

Oops! Got a little error message: "Issue with useStoreState - Can't access properties of undefined (reading 'getState') - But no biggie!"

I am encountering an issue while using easy-peasy in my next.js code to store some values. Whenever I attempt to utilize these stored values, I encounter an error. What steps should I take to resolve this issue? Here is the structure I have set up: https ...

The webhook requests sent to the Stripe endpoint in a Next.js application hosted on Vercel were

I am currently working on a next.js project that is set up to receive events from Stripe using an API route. The code snippet below shows how this is implemented. Everything works perfectly fine when testing locally with the help of the Stripe CLI for rec ...

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Dealing with annoying warnings in my aspx files has been a constant struggle. The "CSS Value is not defined" message pops up when I reference CSS files from different projects, causing unnecessary frustration. Even more frustrating are the warnings about i ...

Ways to align elements vertically in a container without using flexbox?

I am working with a ul element that has a height of 270px and contains 10 li elements. My goal is to have all the li elements vertically justified, meaning the top and bottom li elements should touch the container's top and bottom respectively, while ...

How to creatively position custom arrows in a React JS Nuka Carousel

Seeking assistance on properly positioning custom arrows within the Nuka Carousel component. After combining the decorators, I found that both of my arrows are appearing side by side. How can I address this issue? My goal is to have one arrow positioned in ...

Achieving unique horizontal and vertical spacing in Material UI Grid

In my current Material UI setup, I have set spacing in the Grid Container to space Grid Items vertically. While this works well on larger screens, it causes awkward horizontal spacing between Grid Items on mobile devices. <Grid container spacing={24}> ...

Exporting Next.js sitemap statically

Can anyone assist me in creating a Sitemap for my NextJs project? I have developed a headless CMS using GraphQL and Next, with everything being statically generated. However, I am facing challenges when it comes to generating a sitemap. I attempted to use ...