CODEWITHSUNDEEP
reactjsmaterial-ui
Udayendu
Udayendu

Reputation: 505

MUI: The value found in theme for prop: "error" is an [Object] instead of string or number

In MUI v5.14.13, everything was working fine and all of sudden I started getting the following error:

MUI: The value found in theme for prop: "error" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".

Which seems to be coming from style.js:34 file. Even though there is no direct use of styled component in that component, I am getting the above error message.

Here is an example

The below code will start a dialog box in full screen and close it when clicked cancel:

import * as React from "react";
import Dialog from "@mui/material/Dialog";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/icons-material/Close";
import Slide from "@mui/material/Slide";
import { Box, Button, Stack } from "@mui/material";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

const FullScreenDialog = ({ open, onClose }) => {
  return (
    <div>
      <Dialog
        fullScreen
        open={open}
        onClose={onClose}
        TransitionComponent={Transition}
      >
        <AppBar sx={{ position: "relative" }}>
          <Toolbar>
            <IconButton
              edge="start"
              color="inherit"
              onClick={onClose}
              aria-label="close"
            >
              <CloseIcon />
            </IconButton>
          </Toolbar>
        </AppBar>
        <Box margin={{ sm: 3, xs: 2 }}>
          <Stack spacing={1} direction="row" justifyContent={"flex-end"}>
            <Button
              variant="outlined"
              color="error"
              size="small"
              onClick={onClose}
              sx={{
                borderRadius: 10,
                textTransform: "none",
                ":hover": {
                  bgcolor: "error",
                  color: "error",
                  border: "error",
                },
              }}
            >
              Cancel
            </Button>
          </Stack>
        </Box>
      </Dialog>
    </div>
  );
};

export default FullScreenDialog;

When clicking on Cancel button, the same error is coming. And even when click on the start button from a different component, still the same error is coming.

Any idea is anything has changed in MUI which is causing this issue ?

Upvotes: 4

Views: 280

Answers (1)

mapache-salvaje
mapache-salvaje

Reputation: 705

This was a regression in this version of Material UI, and it's been resolved in this pull request which should be included in the next version that'll be released in the next day or two.

Upvotes: 1

Related Questions