[Slider] Add sx prop in SliderStyled

docs/pages/api-docs/slider-styled.md

@@ -46,6 +46,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> |  | The slider orientation. |
 | <span class="prop-name">scale</span> | <span class="prop-type">func</span> |  | A transformation function, to change the scale of the slider. |
 | <span class="prop-name">step</span> | <span class="prop-type">number</span> |  | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
+| <span class="prop-name">sx</span> | <span class="prop-type">object</span> |  | The system prop that allows defining system overrides as well as additional CSS styles. |
 | <span class="prop-name">track</span> | <span class="prop-type">'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false</span> |  | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
 | <span class="prop-name">value</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> |  | The value of the slider. For ranged sliders, provide an array with two values. |
 | <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> |  | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |

docs/src/pages/components/slider-styled/ContinuousSlider.js

@@ -37,6 +37,15 @@ export default function ContinuousSlider() {
         Disabled slider
       </Typography>
       <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
+      <Slider
+        defaultValue={30}
+        aria-labelledby="disabled-slider"
+        sx={{
+          m: 2,
+          color: 'secondary.main',
+          bgcolor: 'primary.light',
+        }}
+      />
     </Box>
   );
 }

docs/src/pages/components/slider-styled/ContinuousSlider.tsx

@@ -40,6 +40,15 @@ export default function ContinuousSlider() {
         Disabled slider
       </Typography>
       <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
+      <Slider
+        defaultValue={30}
+        aria-labelledby="disabled-slider"
+        sx={{
+          m: 2,
+          color: 'secondary.main',
+          bgcolor: 'primary.light',
+        }}
+      />
     </Box>
   );
 }

packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts

@@ -1,19 +1,29 @@
 import * as React from 'react';
-import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
-import { SliderTypeMap } from '../SliderUnstyled';
+import { SxProps } from '@material-ui/core/Box';
+import { ExtendSliderUnstyledTypeMap, ExtendSliderUnstyled } from '../SliderUnstyled';
 
-export type SliderProps<
-  D extends React.ElementType = SliderTypeMap['defaultComponent'],
+export type SliderStyledTypeMap<
+  D extends React.ElementType = 'span',
   P = {}
-> = OverrideProps<SliderTypeMap<P, D>, D>;
+> = ExtendSliderUnstyledTypeMap<{
+  props: P & {
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps;
+  };
+  defaultComponent: D;
+}>;
 
-type SliderRootProps = NonNullable<SliderProps['componentsProps']>['root'];
-type SliderMarkProps = NonNullable<SliderProps['componentsProps']>['mark'];
-type SliderMarkLabelProps = NonNullable<SliderProps['componentsProps']>['markLabel'];
-type SliderRailProps = NonNullable<SliderProps['componentsProps']>['rail'];
-type SliderTrackProps = NonNullable<SliderProps['componentsProps']>['track'];
-type SliderThumbProps = NonNullable<SliderProps['componentsProps']>['thumb'];
-type SliderValueLabel = NonNullable<SliderProps['componentsProps']>['valueLabel'];
+type SliderRootProps = NonNullable<SliderStyledTypeMap['props']['componentsProps']>['root'];
+type SliderMarkProps = NonNullable<SliderStyledTypeMap['props']['componentsProps']>['mark'];
+type SliderMarkLabelProps = NonNullable<
+  SliderStyledTypeMap['props']['componentsProps']
+>['markLabel'];
+type SliderRailProps = NonNullable<SliderStyledTypeMap['props']['componentsProps']>['rail'];
+type SliderTrackProps = NonNullable<SliderStyledTypeMap['props']['componentsProps']>['track'];
+type SliderThumbProps = NonNullable<SliderStyledTypeMap['props']['componentsProps']>['thumb'];
+type SliderValueLabel = NonNullable<SliderStyledTypeMap['props']['componentsProps']>['valueLabel'];
 
 export const SliderRoot: React.FC<SliderRootProps>;
 export const SliderMark: React.FC<SliderMarkProps>;
@@ -33,6 +43,6 @@ export const SliderValueLabel: React.FC<SliderValueLabel>;
  *
  * - [SliderStyled API](https://material-ui.com/api/slider-styled/)
  */
-declare const Slider: OverridableComponent<SliderTypeMap>;
+declare const Slider: ExtendSliderUnstyled<SliderStyledTypeMap>;
 
 export default Slider;

packages/material-ui-lab/src/SliderStyled/SliderStyled.js

@@ -441,6 +441,10 @@ Slider.propTypes = {
    * @default 1
    */
   step: PropTypes.number,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
   /**
    * The track presentation:
    *

packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts

@@ -1,4 +1,4 @@
-import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { OverridableComponent, OverridableTypeMap } from '@material-ui/core/OverridableComponent';
 
 export interface Mark {
   value: number;
@@ -195,6 +195,18 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
   defaultComponent: D;
 }
 
+/**
+ * utility to create component types that inherit props from SliderUnstyled.
+ */
+export interface ExtendSliderUnstyledTypeMap<M extends OverridableTypeMap> {
+  props: M['props'] & Omit<SliderTypeMap['props'], 'classes'>;
+  defaultComponent: M['defaultComponent'];
+}
+
+export type ExtendSliderUnstyled<M extends OverridableTypeMap> = OverridableComponent<
+  ExtendSliderUnstyledTypeMap<M>
+>;
+
 /**
  *
  * Demos:

packages/material-ui-styled-engine-sc/src/index.js

@@ -1,14 +1,18 @@
 import scStyled from 'styled-components';
 
 export default function styled(tag, options) {
+  let scStyledPrepared = scStyled(tag);
+
   if (options) {
-    return scStyled(tag).withConfig({
+    scStyledPrepared = scStyled(tag).withConfig({
       displayName: options.label,
       shouldForwardProp: options.shouldForwardProp,
     });
   }
 
-  return scStyled(tag);
+  return (styles) => {
+    return scStyledPrepared(...styles);
+  };
 }
 
 export { ThemeContext } from 'styled-components';

packages/material-ui/src/Box/Box.d.ts

@@ -35,7 +35,8 @@ export type BoxStyleFunction = ComposedStyleFunction<
 type SystemProps = PropsFor<BoxStyleFunction>;
 type ElementProps = Omit<React.HTMLAttributes<HTMLElement>, keyof SystemProps>;
 type SxPropsValue = Omit<CSSObject, keyof SystemProps> & SystemProps;
-type SxProps = {
+
+export type SxProps = {
   [Name in keyof SxPropsValue]?:
     | SxPropsValue[Name]
     | ((theme: Theme) => CSSObject | SxPropsValue[Name])

packages/material-ui/src/Box/styleFunction.js

@@ -72,7 +72,7 @@ const getThemeValue = (prop, value, theme) => {
   return { [prop]: value };
 };
 
-const styleFunctionSx = (styles, theme) => {
+export const styleFunctionSx = (styles, theme) => {
   if (!styles) return null;
 
   if (typeof styles === 'function') {

packages/material-ui/src/styles/experimentalStyled.js

@@ -1,5 +1,6 @@
 import styled from '@material-ui/styled-engine';
 import { propsToClassKey } from '@material-ui/styles';
+import { styleFunctionSx } from '../Box/styleFunction';
 import defaultTheme from './defaultTheme';
 
 function isEmpty(obj) {
@@ -58,7 +59,7 @@ const variantsResolver = (props, styles, theme, name) => {
   return variantsStyles;
 };
 
-const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme';
+const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme' && prop !== 'sx';
 
 const experimentalStyled = (tag, options, muiOptions = {}) => {
   const name = muiOptions.muiName;
@@ -85,7 +86,12 @@ const experimentalStyled = (tag, options, muiOptions = {}) => {
       });
     }
 
-    return defaultStyledResolver(...stylesWithDefaultTheme);
+    stylesWithDefaultTheme.push((props) => {
+      const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
+      return styleFunctionSx(props.sx, theme);
+    });
+
+    return defaultStyledResolver(stylesWithDefaultTheme);
   };
   return muiStyledResolver;
 };

packages/material-ui/src/styles/experimentalStyled.test.js

@@ -93,19 +93,14 @@ describe('experimentalStyled', () => {
       });
 
       // FIXME: Should not error in DEV
-      expect(() => {
-        Test = styled(
-          'div',
-          { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' },
-          { muiName: 'MuiTest', overridesResolver: testOverridesResolver },
-        )`
-          width: 200px;
-          height: 300px;
-        `;
-      }).toErrorDev([
-        'You have illegal escape sequence in your template literal',
-        'You have illegal escape sequence in your template literal',
-      ]);
+      Test = styled(
+        'div',
+        { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' },
+        { muiName: 'MuiTest', overridesResolver: testOverridesResolver },
+      )`
+        width: 200px;
+        height: 300px;
+      `;
     });
 
     it('should work with specified muiOptions', () => {
@@ -178,5 +173,17 @@ describe('experimentalStyled', () => {
         height: '400px',
       });
     });
+
+    it('should resolve the sx prop', () => {
+      render(
+        <Test data-testid="component" sx={{ m: 1 }}>
+          Test
+        </Test>,
+      );
+
+      expect(screen.getByTestId('component')).toHaveComputedStyle({
+        margin: '8px',
+      });
+    });
   });
 });