sx style delay with Button

Jedidiahip commented 3 months ago

Steps to reproduce

duplicated the example https://github.com/mui/pigment-css/tree/master/examples/pigment-css-nextjs-ts
add /src/app/test/test1/layout.js
add /src/app/test/test1/page.js
npm install @mui/material@next
npm install @mui/material-pigment-css
npm install --save-dev @pigment-css/nextjs-plugin
npx @mui/codemod@next v6.0.0/sx-prop /src

/src/app/test/test1/page.js

import Box from '@mui/material-pigment-css/Box'
import Button from '@mui/material/Button'

export default function TestContext(){
    return (
        <div>
            <div>div</div>
            <Box sx={{
                background:"red",
            }}>Box</Box>
            <Button sx={{
                background:"red",
            }}>button</Button>
        </div>
    )
}

/src/app/test/test1/layout.js

import * as React from 'react'
import '@pigment-css/react/styles.css'
import { css } from '@pigment-css/react'
import '@mui/material-pigment-css/styles.css';

import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout(props) {
  return (
    <html lang="en">
      <body
        className={css(({ theme }) => ({
          color: 'hsl(var(--palette-foreground))',
          backgroundColor: 'hsl(var(--palette-background))',
          fontFamily:
            "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
          ...theme.applyStyles('dark', {
            colorScheme: 'dark',
          }),
        }))}
      >
        {props.children}
      </body>
    </html>
  );
}

package.json

{
  "name": "next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@mui/material-pigment-css": "^6.0.0-beta.0",
    "@pigment-css/react": "latest",
    "next": "latest",
    "react": "latest",
    "react-dom": "latest",
    "@mui/material": "next"
  },
  "devDependencies": {
    "@pigment-css/nextjs-plugin": "^0.0.18",
    "@svgr/webpack": "^8.1.0",
    "@types/node": "^22.0.2",
    "eslint": "latest",
    "eslint-config-next": "latest"
  }
}

Current behavior

https://github.com/user-attachments/assets/1a9928b5-e9b1-4766-b7e7-3f4c7016ae51

background of Button is flickering from the default background to the customized background:"red" on page refresh

Expected behavior

background of Button should be colored red after refreshing like the Box

Context

No response

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. in Edge and Chrome System: OS: Linux 6.5 Debian GNU/Linux 10 (buster) 10 (buster) Binaries: Node: 20.8.1 - /usr/local/bin/node npm: 10.1.0 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.13.0 @emotion/styled: 11.13.0 @mui/core-downloads-tracker: 6.0.0-dev.240424162023-9968b4889d @mui/material: next => 6.0.0-beta.4 @mui/material-pigment-css: ^6.0.0-beta.0 => 6.0.0-beta.4-dev.20240805-092432-9f940a61d6 @mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab @mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab @mui/system: 6.0.0-dev.240424162023-9968b4889d @mui/types: 7.2.15 @mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab @types/react: 18.3.3 react: latest => 18.3.1 react-dom: latest => 18.3.1 typescript: 5.5.4 ```

Search keywords: sx delay

laphim123 commented 3 months ago

I have similar issue , when i trying to migrate from emotion to pigment-css. Some styles of MUI components are not fully loaded initially. Is it works as expected?

Jedidiahip commented 3 months ago

I solved with adding a mui class selector to overwrite the default style without css flickering

<Button sx={{
  // background:"red",
  "&.MuiButtonBase-root":{
    background:"red",
  }
}}>button</Button>

https://github.com/user-attachments/assets/a3caea21-1e01-45de-8477-efd795964ff6

mui / pigment-css