Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Skeleton] Not working with styleOverrides

See original GitHub issue

    MuiSkeleton: {
      defaultProps: {
        animation: 'wave'
      },
      styleOverrides: {
        root: {
          backgroundColor: 'red !important' // not apply 
        }
      }
    }

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

glocorecommented, Feb 17, 2021

I’m working on this issue!

0reactions

oliviertassinaricommented, Feb 16, 2021

Ok, there are a couple of issues. I would propose this fix:

diff --git a/packages/material-ui/src/Skeleton/Skeleton.js b/packages/material-ui/src/Skeleton/Skeleton.js
index 24f402b676..9bd38aa15e 100644
--- a/packages/material-ui/src/Skeleton/Skeleton.js
+++ b/packages/material-ui/src/Skeleton/Skeleton.js
@@ -70,8 +70,7 @@ const waveKeyframe = keyframes`
 const SkeletonRoot = experimentalStyled(
   'span',
   {},
-  { name: 'MuiSkeleton', slot: 'Root' },
-  overridesResolver,
+  { name: 'MuiSkeleton', slot: 'Root', overridesResolver },
 )(
   ({ theme, styleProps }) => {
     const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
diff --git a/packages/material-ui/src/Skeleton/Skeleton.test.js b/packages/material-ui/src/Skeleton/Skeleton.test.js
index 2f89484cdd..19d43cb49f 100644
--- a/packages/material-ui/src/Skeleton/Skeleton.test.js
+++ b/packages/material-ui/src/Skeleton/Skeleton.test.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import * as React from 'react';
-import { createClientRender, createMount, describeConformance } from 'test/utils';
+import { createClientRender, createMount, describeConformanceV5 } from 'test/utils';
 import Skeleton from './Skeleton';
 import classes from './skeletonClasses';

@@ -8,14 +8,14 @@ describe('<Skeleton />', () => {
   const mount = createMount();
   const render = createClientRender();

-  describeConformance(<Skeleton />, () => ({
+  describeConformanceV5(<Skeleton />, () => ({
     classes,
     inheritComponent: 'span',
     mount,
     refInstanceof: window.HTMLSpanElement,
     muiName: 'MuiSkeleton',
     testVariantProps: { variant: 'circular', animation: 'wave' },
-    skip: ['componentProp', 'componentsProp'],
+    skip: ['componentsProp'],
   }));

   it('should render', () => {
diff --git a/packages/material-ui/src/styles/components.d.ts b/packages/material-ui/src/styles/components.d.ts
index 6adecbe35b..4a3400db9b 100644
--- a/packages/material-ui/src/styles/components.d.ts
+++ b/packages/material-ui/src/styles/components.d.ts
@@ -316,6 +316,10 @@ export interface Components {
     defaultProps?: ComponentsProps['MuiSelect'];
     styleOverrides?: ComponentsOverrides['MuiSelect'];
   };
+  MuiSkeleton?: {
+    defaultProps?: ComponentsProps['MuiSkeleton'];
+    styleOverrides?: ComponentsOverrides['MuiSkeleton'];
+  };
   MuiSlider?: {
     defaultProps?: ComponentsProps['MuiSlider'];
     styleOverrides?: ComponentsOverrides['MuiSlider'];