Closed yuvalkarmi closed 11 months ago
This occurs because the wave
animation uses the ::after
pseudo-element, while the pulse
animation does not. In the case of a text.secondary
background color for the skeleton, the wave pseudo-element's default background color is lighter, making it appear invisible. To address this, you can customize the pseudo-element's background color to be slightly darker than the skeleton's background color. For instance:
<Skeleton
sx={{
bgcolor: 'text.secondary',
'&::after': {
bgcolor: 'text.primary',
},
}}
animation="wave"
/>;
CodeSandbox - https://codesandbox.io/s/gallant-frog-gprh56?file=/src/App.tsx.
Does this help?
Duplicates
Latest version
Steps to reproduce 🕹
Environment
Description
The 'wave' animation on the
Skeleton
component becomes invisible when a custom background color is applied using thesx
prop. Notably, the 'pulse' animation does not exhibit this issue and works as expected with any background color.Steps to Reproduce
Skeleton
component.sx={{ bgcolor: "text.secondary" }}
.animation="wave"
.Current behavior 😯
No response
Expected behavior 🤔
No response
Context 🔦
No response
Your environment 🌎
``` System: OS: macOS 13.3.1 Binaries: Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm Browsers: Chrome: 119.0.6045.123 Edge: Not Found Safari: 16.4 npmPackages: @emotion/react: ^11.11.0 => 11.11.0 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-alpha.118 @mui/core-downloads-tracker: 5.13.2 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/lab: ^5.0.0-alpha.120 => 5.0.0-alpha.120 @mui/material: ^5.13.2 => 5.13.2 @mui/private-theming: 5.13.1 @mui/styled-engine: 5.13.2 @mui/system: 5.13.2 @mui/types: 7.2.4 @mui/utils: 5.13.1 @types/react: 18.0.25 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.5 => 4.9.5 ```npx @mui/envinfo