[SKELETON] [BUG] Skeleton Height is Unpredictable(Ghost Padding or Margin) Without variant Attribute

[realvandi]

Search keywords

Skeleton, Height, Padding, Margin

Latest version

• I have tested the latest version

Steps to reproduce

Done in a fresh NextJS project:

export default function Home() {
  return (
    <>
     <Box sx={{ display: "flex", flexDirection: "row", gap: 1 }}>
        <Box
          sx={{
            height: 400,
            width: "100%",
            padding: 1,
            backgroundColor: "#ff33b211",
          }}
        >
          <Skeleton height={"100%"} />
        </Box>
        <Box
          sx={{
            height: 400,
            width: "100%",
            padding: 1,
            backgroundColor: "#22ffb211",
          }}
        >
          <Skeleton variant="rounded" height={"100%"} />
        </Box>
      </Box>
      <code>{'<Skeleton height={"100%"}/>'}</code>
      <small>(left)</small>
      <Typography>vs.</Typography>
      <code>{'<Skeleton variant="rounded" height={"100%"}/>'}</code>
      <small>(right)</small>
      <Typography>
        Both skeletons are surrounded in
        <code>{'<Box sx={{ height: 400, width: "100%", padding: 1 }}>'}</code>
      </Typography> 
    </>
  );
}

Current behavior

-TL;DR: Excluding the variant attribute makes the height of a skeleton component unexpected.

Expected behavior

-Including/excluding the variant attribute should not affect how the height of the skeleton grows.

Context

-Reproduced in a fresh NextJS project, using the latest versions of @mui/material and @mui/system available from NPM.

Your environment

  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/material": "^5.15.20",
    "@mui/system": "^5.15.20",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18"
  }

[brijeshb42]

If you don't specify a variant, the default is text which has it's own styling. From the docs:

represents a single line of text (you can adjust the height via font size).

[realvandi]

Oops, you're right, thanks for pointing this out. I guess I missed that part of the documentation. Thanks for the response!