Externally defined classname styles not loading correctly when using Next.js

[jooy2]

Steps to reproduce

There are the following repositories where you can try to reproduce this issue:
https://github.com/jooy2/nextart

1. clone this repository
2. run npm i
3. run npm run dev

First, notice that the button is black on the main page (/). Refresh (F5) and the button should still be black.

Then, without refreshing, click the button to go to the second page. The second page has the same style applied, so the button will be black.

However, if you do a refresh on the second page with this state, the button will be unstyled and blue.

Buttons should appear black in all situations, such as refreshing and switching routing.

Current behavior

The button doesn't apply the customized style in certain situations.

Expected behavior

Buttons should appear black in all situations, such as refreshing and switching routing.

Pigment-css also need to be able to use the styles you define in the external file.

Context

Buttons with external styles in a client component do not seem to be applied when the page is loaded.

However, as an exception, if the styles applied to that component are defined in the same file, the problem is not reproduced.

In my current implementation, this is the situation with the client component code:

'use client';

import { cssBlackButton } from '@/styles/commonStyles';
import { Button } from '@mui/material';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';

export default function ClientSide() {
  const router = useRouter();
  const t = useTranslations();

  return (
    <Button
      onClick={() => router.push('/')}
      variant="contained"
      color="primary"
      fullWidth
      className={cssBlackButton}
    >
      {t('menu.back')}
    </Button>
  );
}

The cssBlackButton was defined in an external file:

import { css } from '@mui/material-pigment-css';

export const cssBlackButton = css({
  background: 'black',
  color: 'white',
});

I haven't reviewed everything, but this seems to happen most notably with the Button component (ButtonBase).

Maybe I missed some setting or migration item in pigment-css or material-ui. Or maybe this is what was intended, I don't know.

I would like to know if this is a valid issue and if there is a workaround at this time. Thank you for your help.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.2
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 7.13.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Edge: 131.0.2903.112
    Safari: 18.2
  npmPackages:
    @emotion/react:  11.14.0 
    @emotion/styled:  11.14.0 
    @mui/core-downloads-tracker:  6.3.0 
    @mui/icons-material: ^6.3.0 => 6.3.0 
    @mui/material: ^6.3.0 => 6.3.0 
    @mui/material-nextjs: ^6.3.0 => 6.3.0 
    @mui/material-pigment-css: ^6.3.0 => 6.3.0 
    @mui/private-theming:  6.3.0 
    @mui/styled-engine:  6.3.0 
    @mui/system:  6.3.0 
    @mui/types:  7.2.20 
    @mui/utils:  6.3.0 
    @pigment-css/nextjs-plugin: ^0.0.29 => 0.0.29 
    @pigment-css/react:  0.0.28 
    @pigment-css/unplugin:  0.0.29 
    @types/react: ^19.0.2 => 19.0.2 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    typescript: ^5.7.2 => 5.7.2 

Search keywords: pigment-css,nextjs,client-component,external-file

[brijeshb42]

This is something that we are fixing in the v1 version slated for release at the end of quarter.
This is an issue with specificity which cannot be fixed right away. Keeping this open for tracking.

[jooy2]

Thanks for letting me know! I'm sure pigment-css will be the best alternative in the future. I appreciate your hard work.

I've created a separate branch for you to reproduce in my repository. You should be able to follow the issue in that branch in the future if needed:

https://github.com/jooy2/nextart/tree/pigment-css-368

I'll also keep this issue open instead of closing it.

Regards,