Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

sx style delay with Button #194

Open
Jedidiahip opened this issue Aug 6, 2024 · 2 comments
Open

sx style delay with Button #194

Jedidiahip opened this issue Aug 6, 2024 · 2 comments
Assignees
@brijeshb42
Labels
package: system Specific to @mui/system status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@Jedidiahip
Copy link

Jedidiahip commented Aug 6, 2024 •
edited
Loading

Steps to reproduce

  1. duplicated the example https://github.com/mui/pigment-css/tree/master/examples/pigment-css-nextjs-ts
  2. add /src/app/test/test1/layout.js
  3. add /src/app/test/test1/page.js
  4. npm install @mui/material@next
  5. npm install @mui/material-pigment-css
  6. npm install --save-dev @pigment-css/nextjs-plugin
  7. 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

945dddbd-b621-4f78-bfae-dce60042797b.mp4

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
@Jedidiahip Jedidiahip added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 6, 2024
@zannager zannager added the package: system Specific to @mui/system label Aug 6, 2024
@laphim123
Copy link

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
Copy link
Author

Jedidiahip commented Aug 27, 2024 •
edited
Loading

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>
d4db964e-ef03-4fa4-9692-f39b7a86bdf5.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brijeshb42 brijeshb42

Labels
package: system Specific to @mui/system status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@brijeshb42 @Jedidiahip @laphim123 @zannager