Closed mattmcdonald-uk closed 3 years ago
@mattmcdonald-uk I would recommend customizing the CSS in userland in such a case.
OK - perhaps this is a fairly niche use case.
I don't think using a Mui Component in a dark theme is a niche use case. I am currently having the same issue.
@oliviertassinari running to the same issue, is there an official work around this (besides using a spinner 🙃) ?
Couldn't find anything in the other issues reporting the same.
What classes would I use to customize this?
Update:
This fixed it: https://material-ui.com/customization/components/#overriding-styles-with-classes
@Sinan-private Do you have a visual illustration? I don't understand the case we are considering. If the theme in the context is dark, the Skeleton will adapt accordingly.
A demo of how the customization can be done in v5:
import * as React from "react";
import Box from "@material-ui/core/Box";
import Skeleton from "@material-ui/core/Skeleton";
export default function Variants() {
return (
<Box sx={{ bgcolor: "#000", p: 8 }}>
<Skeleton sx={{ bgcolor: "grey.900" }} variant="text" />
<Skeleton
sx={{ bgcolor: "grey.900" }}
variant="circular"
width={40}
height={40}
/>
<Skeleton
sx={{ bgcolor: "grey.900" }}
variant="rectangular"
width={210}
height={118}
/>
</Box>
);
}
https://codesandbox.io/s/variants-material-demo-forked-5xfd6?file=/demo.tsx:0-556
maybe you should add this in the API docs, also there is no mention of the prop sx
in the docs, why?
@the-wrong-guy Adding a new demo for this sounds great. Do you want to do so? :) The sx prop is documented under the system section.
@the-wrong-guy Adding a new demo for this sounds great. Do you want to do so? :) The sx prop is documented under the system section.
Well, I don't how to add a new demo to the official docs, if you can lead me I can follow.
And when I tested the sx
prop which you showed in your demo didn't work for me, I am using @material-ui/core": "^4.11.0
and @material-ui/lab": "^4.0.0-alpha.57"
, it only works for the alpha versions, not for the stable versions i.e. up to Ver: 14.11.3
@the-wrong-guy the sx prop is a v5 only feature. Regarding contributing, you should get all you need in https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md.
@the-wrong-guy the sx prop is a v5 only feature. Regarding contributing, you should get all you need in https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md.
Should I add an issue regarding the intensity of the pulses of the skeleton? It would be good if you add a prop to control the intensity and color of the pulses
@the-wrong-guy this is unrelated, it's a generic customization question.
@the-wrong-guy this is unrelated, it's a generic customization question.
Yeah, but i can't able figure out how to apply styles to those skeletons to increase it's intensity and flashing color
I did an workaround overriding MuiSkeleton-root
like this:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Skeleton } from "@material-ui/core";
const useStyles = makeStyles(({
root: {
"&.MuiSkeleton-root": {
backgroundColor: "#9e9e9e",
}
}
}));
export default function LoadingSkeleton() {
const classes = useStyles();
return (
<Skeleton
variant="text"
width={200}
className={classes.root}
/>
);
}
The new demo in the documentation: https://next.material-ui.com/components/skeleton/#color
For anyone looking for a more visible animation in the Skeleton when changing background color and having a dark background, here is what worked for me:
listItemSkeleton: {
bgcolor: 'grey.600',
'&.MuiSkeleton-root:after': {
background: (theme) => `linear-gradient(90deg,transparent,${theme.palette.grey[400]},transparent)`,
},
}
Summary 💡
The Skeleton component only supports one rendering colour, and if placed over a dark background is invisible.
Motivation 🔦
I am using a text variant Skeleton on a dark grey background, but it can't be viewed. It would be nice if it supported a light variant.
I'm not sure if this is best done through a dark/light toggle, or perhaps through the
color
property? In my use case it is a child of an AppBar so could perhaps supportcolor="inherit"
toknow that I'm using a dark AppBar as other child components do.