diff --git a/docs/pages/api-docs/backdrop.json b/docs/pages/api-docs/backdrop.json
index 278769b1eab301..6ec5cba609a02e 100644
--- a/docs/pages/api-docs/backdrop.json
+++ b/docs/pages/api-docs/backdrop.json
@@ -4,6 +4,7 @@
"classes": { "type": { "name": "object" } },
"invisible": { "type": { "name": "bool" } },
"open": { "type": { "name": "bool" }, "required": true },
+ "sx": { "type": { "name": "object" } },
"transitionDuration": {
"type": {
"name": "union",
@@ -18,6 +19,6 @@
"filename": "/packages/material-ui/src/Backdrop/Backdrop.js",
"inheritance": { "component": "Fade", "pathname": "/api/fade/" },
"demos": "
",
- "styledComponent": false,
+ "styledComponent": true,
"cssComponent": false
}
diff --git a/docs/translations/api-docs/backdrop/backdrop.json b/docs/translations/api-docs/backdrop/backdrop.json
index f7a6573c7e1a2c..7b4d4034715548 100644
--- a/docs/translations/api-docs/backdrop/backdrop.json
+++ b/docs/translations/api-docs/backdrop/backdrop.json
@@ -5,6 +5,7 @@
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
"invisible": "If true
, the backdrop is invisible. It can be used when rendering a popover or a custom select component.",
"open": "If true
, the component is shown.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object."
},
"classDescriptions": {
diff --git a/packages/material-ui/src/Backdrop/Backdrop.d.ts b/packages/material-ui/src/Backdrop/Backdrop.d.ts
index b7c561507b0e87..3fb4bdabe0fa9d 100644
--- a/packages/material-ui/src/Backdrop/Backdrop.d.ts
+++ b/packages/material-ui/src/Backdrop/Backdrop.d.ts
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { Omit, InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { Omit, InternalStandardProps as StandardProps, Theme } from '..';
import { FadeProps } from '../Fade';
import { TransitionProps } from '../transitions/transition';
@@ -30,6 +31,10 @@ export interface BackdropProps
* If `true`, the component is shown.
*/
open: boolean;
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx?: SxProps;
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js
index a8e0103beab2b2..8ce86e95a6a794 100644
--- a/packages/material-ui/src/Backdrop/Backdrop.js
+++ b/packages/material-ui/src/Backdrop/Backdrop.js
@@ -1,35 +1,62 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { deepmerge } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
import Fade from '../Fade';
+import { getBackdropUtilityClass } from './backdropClasses';
-export const styles = {
- /* Styles applied to the root element. */
- root: {
- // Improve scrollable dialog support.
- zIndex: -1,
- position: 'fixed',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- right: 0,
- bottom: 0,
- top: 0,
- left: 0,
- backgroundColor: 'rgba(0, 0, 0, 0.5)',
- WebkitTapHighlightColor: 'transparent',
+const overridesResolver = (props, styles) => {
+ const { styleProps } = props;
+
+ return deepmerge(styles.root || {}, {
+ ...(styleProps.invisible && styles.invisible),
+ });
+};
+
+const useUtilityClasses = (styleProps) => {
+ const { classes, invisible } = styleProps;
+
+ const slots = {
+ root: ['root', invisible && 'invisible'],
+ };
+
+ return composeClasses(slots, getBackdropUtilityClass, classes);
+};
+
+const BackdropRoot = experimentalStyled(
+ 'div',
+ {},
+ {
+ name: 'MuiBackdrop',
+ slot: 'Root',
+ overridesResolver,
},
+)(({ styleProps }) => ({
+ // Improve scrollable dialog support.
+ zIndex: -1,
+ position: 'fixed',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ right: 0,
+ bottom: 0,
+ top: 0,
+ left: 0,
+ backgroundColor: 'rgba(0, 0, 0, 0.5)',
+ WebkitTapHighlightColor: 'transparent',
/* Styles applied to the root element if `invisible={true}`. */
- invisible: {
+ ...(styleProps.invisible && {
backgroundColor: 'transparent',
- },
-};
+ }),
+}));
-const Backdrop = React.forwardRef(function Backdrop(props, ref) {
+const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
+ const props = useThemeProps({ props: inProps, name: 'MuiBackdrop' });
const {
children,
- classes,
className,
invisible = false,
open,
@@ -39,21 +66,23 @@ const Backdrop = React.forwardRef(function Backdrop(props, ref) {
...other
} = props;
+ const styleProps = {
+ ...props,
+ invisible,
+ };
+
+ const classes = useUtilityClasses(styleProps);
+
return (
-
{children}
-
+
);
});
@@ -85,6 +114,10 @@ Backdrop.propTypes = {
* If `true`, the component is shown.
*/
open: PropTypes.bool.isRequired,
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx: PropTypes.object,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
@@ -99,4 +132,4 @@ Backdrop.propTypes = {
]),
};
-export default withStyles(styles, { name: 'MuiBackdrop' })(Backdrop);
+export default Backdrop;
diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/packages/material-ui/src/Backdrop/Backdrop.test.js
index aecae1e037bd0c..82637ada70e3a4 100644
--- a/packages/material-ui/src/Backdrop/Backdrop.test.js
+++ b/packages/material-ui/src/Backdrop/Backdrop.test.js
@@ -1,25 +1,24 @@
import * as React from 'react';
import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
import Backdrop from './Backdrop';
import Fade from '../Fade';
+import classes from './backdropClasses';
describe('', () => {
const mount = createMount({ strict: true });
const render = createClientRender();
- let classes;
- before(() => {
- classes = getClasses();
- });
-
- describeConformance(, () => ({
+ describeConformanceV5(, () => ({
classes,
inheritComponent: Fade,
mount,
refInstanceof: window.HTMLDivElement,
+ muiName: 'MuiBackdrop',
+ testVariantProps: { invisible: true },
skip: [
'componentProp',
+ 'componentsProp',
// react-transition-group issue
'reactTestRenderer',
],
diff --git a/packages/material-ui/src/Backdrop/backdropClasses.d.ts b/packages/material-ui/src/Backdrop/backdropClasses.d.ts
new file mode 100644
index 00000000000000..302051ec05ae67
--- /dev/null
+++ b/packages/material-ui/src/Backdrop/backdropClasses.d.ts
@@ -0,0 +1,10 @@
+export interface BackdropClasses {
+ root: string;
+ invisible: string;
+}
+
+declare const backdropClasses: BackdropClasses;
+
+export function getBackdropUtilityClass(slot: string): string;
+
+export default backdropClasses;
diff --git a/packages/material-ui/src/Backdrop/backdropClasses.js b/packages/material-ui/src/Backdrop/backdropClasses.js
new file mode 100644
index 00000000000000..92b4fcdcebd10c
--- /dev/null
+++ b/packages/material-ui/src/Backdrop/backdropClasses.js
@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getBackdropUtilityClass(slot) {
+ return generateUtilityClass('MuiBackdrop', slot);
+}
+
+const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+
+export default backdropClasses;
diff --git a/packages/material-ui/src/Backdrop/index.d.ts b/packages/material-ui/src/Backdrop/index.d.ts
index bb384d566ab582..5327192b50db62 100644
--- a/packages/material-ui/src/Backdrop/index.d.ts
+++ b/packages/material-ui/src/Backdrop/index.d.ts
@@ -1,2 +1,5 @@
export { default } from './Backdrop';
export * from './Backdrop';
+
+export { default as backdropClasses } from './backdropClasses';
+export * from './backdropClasses';
diff --git a/packages/material-ui/src/Backdrop/index.js b/packages/material-ui/src/Backdrop/index.js
index 4f57103db2523e..03f552962e3e3c 100644
--- a/packages/material-ui/src/Backdrop/index.js
+++ b/packages/material-ui/src/Backdrop/index.js
@@ -1 +1,4 @@
export { default } from './Backdrop';
+
+export { default as backdropClasses } from './backdropClasses';
+export * from './backdropClasses';