Conflict with JoyUI

[Yann-prak]

Describe the bug Hi,

MuiColorInput does not work with JoyUI, it throws this error : Cannot read properties of undefined (different properties where displayed here like borderRadius or outlined). The above error occurred in the <MuiOutlinedInputRoot> component.

My guess is there is a conflict with the required JoyUI's component <CssVarsProvider>. When I remove it, everything is working fine without any styling.

I tried to rollback to 1.0.3 but it didn't change anything.

To Reproduce

import React from "react";
import { TextField, Button, Modal, ModalClose, ModalDialog } from "@mui/joy";
import { CssVarsProvider } from "@mui/joy/styles";
import { Stack } from "@mui/system";
import { MuiColorInput } from "mui-color-input";

const App = () => {
  const [value, setValue] = React.useState("");
  const [openModal, setOpen] = React.useState(false);

  const handleColorChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <CssVarsProvider>
      <div
        className="App"
        style={{
          backgroundColor: "grey",
          height: "100vh",
        }}
      >
        <Button
          onClick={() => {
            setOpen(true);
          }}
        >
          Test modal
        </Button>
        <Modal
          open={openModal}
          onClose={() => {
            setOpen(false);
          }}
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <ModalDialog
            sx={{
              maxWidth: 500,
              borderRadius: "md",
              p: 3,
              boxShadow: "lg",
            }}
          >
            <ModalClose
              variant="outlined"
              sx={{
                top: "calc(-1/4 * var(--IconButton-size))",
                right: "calc(-1/4 * var(--IconButton-size))",
                boxShadow: "0 2px 12px 0 rgba(0 0 0 / 0.2)",
                borderRadius: "50%",
                bgcolor: "background.body",
              }}
            />
            <form
              onSubmit={(event) => {
                event.preventDefault();
                setOpen(false);
              }}
            >
              <Stack spacing={2}>
                <TextField label="UID" autoFocus required />
                <TextField label="Display Name" required />
                <MuiColorInput value={value} onChange={handleColorChange} />
                <Button type="submit">Submit</Button>
              </Stack>
            </form>
          </ModalDialog>
        </Modal>
      </div>
    </CssVarsProvider>
  );
};

export default App;

package.json

"@ctrl/tinycolor": "^3.5.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/joy": "^5.0.0-alpha.60",
"@mui/material": "^5.11.2",
"mui-color-input": "^1.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",

Expected behavior The input should be displayed.

[viclafouch]

Hello !

This component is not and will not be compatible with Joy (for now).

Thanks.