There is a display problem at @mui/material@5.6.0

[ShirasawaSama]

Versions

• mui-color: 2.0.0-beta.2
• @mui/material: 5.6.0
• react: 18.0.0
• @emotion/react: 11.9.0
• @emotion/styled: 11.8.1
• Edge Browser: 100.0.1185.29

Screenshots

But when I click anywhere on the UI it looks normal:

Codes

import React, { useState } from 'react'
import { colors } from '@mui/material'

export const colorMap: Record<string, string> = { }
for (const name in colors) if (name !== 'grey' && name !== 'blueGrey' && name !== 'common') colorMap[name] = colors[name][400]

const Comp = () => {
      const [color, setColor] = useState('#ffffff')
      return <ColorPicker
        deferred
        disableAlpha
        hideTextfield
        value={color}
        palette={colorMap}
        onChange={(color: any) => setColor('#' + color.hex)}
      />
}

I tried to delete all the above attributes, but I still couldn't solve it.

Other information

I noticed that nearly 30 style nodes are created each time picker is opened and closed, and will not be deleted.

[rnrnstar2]

I have a similar problem.
Clicking does not fix it.

[chabErch]

Same problem

[chabErch]

It looks like mui-color doesn't work with React 18

[Stukova]

I have the same problem. I compared the result of using the ColorPicker with react 17 and react 18, it looks like some styles do not apply:

I hope this will help add support for react 18.

[OldManMeta]

mui/styles is not supported when using React 18.

This looks like a great project, but unfortunately because of the project I am working on, React 18 is our requirement.

[viclafouch]

This package (https://github.com/viclafouch/mui-color-input) handles this problem, supports both React 17 / 18 and MUI V5

[ShirasawaSama]

This package (https://github.com/viclafouch/mui-color-input) handles this problem, supports both React 17 / 18 and MUI V5

Thank you very much. I will try this.

[OldManMeta]

@viclafouch thanks for that!