Question 276907 in CSS Question posted in
Some basic documentation can be found here.

Css – Styles are not applied to external components from a different package in NextJs SSR

I am using an external react component that is imported into my nextjs app code, this is how the component looks like

<AppBar className={clsx(classes.header)}>
</AppBar>



export const header = makeStyles((theme) => ({
    header: {
        [theme.breakpoints.down('md')]: {
            padding: `0 ${theme.spacing(4)}px`,
        },
    },
})

However the actual CSS is not applied when the page is server side rendered.

Tags:

2

Answers


  1. 0

    What is most likely happening – your AppBar component gets passed a className prop, but it doesn’t know what to do with it. HTML elements do take a className prop for styling, but you have to code your custom components to do something with the className (such as passing the className to the outermost HTML element in your component).

    For example, a className prop would have no effect on the following component:

    export default function AppBar() {
    return (
        <div>
        </div>
    );
}

    But it would have an effect on the following component because it would apply the class to the top level div:

    export default function AppBar({className}) {
    return (
        <div className={className}>
        </div>
    );
}

    Your AppBar component needs to properly handle the className prop.

    EDIT: Upon further investigation, it seems that the Material UI AppBar component is a styled component. I have found the following GitHub gist which seems to be achieving what you want: https://gist.github.com/Danilo-Araujo-Silva/2ce11fd0540dcc7eb3ad3e67fd75d02a

    Login or Signup to reply.
  2. 0

    I see that you’re using makeStyles, which is a very old and outdated utility from the deprecated @mui/styles package. Are you also using a more recent version of React (18+) and/or Next.js (13+)? If so, you might be encountering fundamental incompatibilities between these packages. @mui/styles will not be updated to work with future React versions beyond 17.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search