;
/**
* If `true`, the children won't be wrapped by a typography component.
* For instance, this can be useful to render an h4 instead of the default h2.
diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js
index 5b193813a85970..b3d9dee9e91270 100644
--- a/packages/material-ui/src/DialogTitle/DialogTitle.js
+++ b/packages/material-ui/src/DialogTitle/DialogTitle.js
@@ -1,23 +1,58 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
import Typography from '../Typography';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
+import { getDialogTitleUtilityClass } from './dialogTitleClasses';
-export const styles = {
- /* Styles applied to the root element. */
- root: {
+const overridesResolver = (props, styles) => styles.root || {};
+
+const useUtilityClasses = (styleProps) => {
+ const { classes } = styleProps;
+
+ const slots = {
+ root: ['root'],
+ };
+
+ return composeClasses(slots, getDialogTitleUtilityClass, classes);
+};
+
+const DialogTitleRoot = experimentalStyled(
+ 'div',
+ {},
+ {
+ name: 'MuiDialogTitle',
+ slot: 'Root',
+ overridesResolver,
+ },
+)(() => {
+ return {
+ /* Styles applied to the root element. */
margin: 0,
padding: '16px 24px',
flex: '0 0 auto',
- },
-};
+ };
+});
-const DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
- const { children, classes, className, disableTypography = false, ...other } = props;
+const DialogTitle = React.forwardRef(function DialogTitle(inProps, ref) {
+ const props = useThemeProps({
+ props: inProps,
+ name: 'MuiDialogTitle',
+ });
+
+ const { children, className, disableTypography = false, ...other } = props;
+ const styleProps = { ...props, disableTypography };
+ const classes = useUtilityClasses(styleProps);
return (
-
+
{disableTypography ? (
children
) : (
@@ -25,7 +60,7 @@ const DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
{children}
)}
-
+
);
});
@@ -52,6 +87,10 @@ DialogTitle.propTypes = {
* @default false
*/
disableTypography: PropTypes.bool,
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx: PropTypes.object,
};
-export default withStyles(styles, { name: 'MuiDialogTitle' })(DialogTitle);
+export default DialogTitle;
diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.test.js b/packages/material-ui/src/DialogTitle/DialogTitle.test.js
index da5466eaa9063a..edbdf7a8e8950d 100644
--- a/packages/material-ui/src/DialogTitle/DialogTitle.test.js
+++ b/packages/material-ui/src/DialogTitle/DialogTitle.test.js
@@ -1,22 +1,20 @@
import * as React from 'react';
-import { getClasses, createMount, describeConformance, createClientRender } from 'test/utils';
+import { createMount, describeConformanceV5, createClientRender } from 'test/utils';
import DialogTitle from './DialogTitle';
+import classes from './dialogTitleClasses';
describe('', () => {
const mount = createMount();
const render = createClientRender();
- let classes;
- before(() => {
- classes = getClasses(foo);
- });
-
- describeConformance(foo, () => ({
+ describeConformanceV5(foo, () => ({
classes,
inheritComponent: 'div',
mount,
+ muiName: 'MuiDialogTitle',
refInstanceof: window.HTMLDivElement,
- skip: ['componentProp'],
+ testVariantProps: { disableTypography: true },
+ skip: ['componentProp', 'componentsProp'],
}));
it('should render JSX children', () => {
diff --git a/packages/material-ui/src/DialogTitle/dialogTitleClasses.d.ts b/packages/material-ui/src/DialogTitle/dialogTitleClasses.d.ts
new file mode 100644
index 00000000000000..08c1f74a2808a1
--- /dev/null
+++ b/packages/material-ui/src/DialogTitle/dialogTitleClasses.d.ts
@@ -0,0 +1,9 @@
+export interface DialogTitleClasses {
+ root: string;
+}
+
+declare const dialogTitleClasses: DialogTitleClasses;
+
+export function getDialogTitleUtilityClass(slot: string): string;
+
+export default dialogTitleClasses;
diff --git a/packages/material-ui/src/DialogTitle/dialogTitleClasses.js b/packages/material-ui/src/DialogTitle/dialogTitleClasses.js
new file mode 100644
index 00000000000000..f083b22e1d4b29
--- /dev/null
+++ b/packages/material-ui/src/DialogTitle/dialogTitleClasses.js
@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getDialogTitleUtilityClass(slot) {
+ return generateUtilityClass('MuiDialogTitle', slot);
+}
+
+const dialogTitleClasses = generateUtilityClasses('MuiDialogTitle', ['root']);
+
+export default dialogTitleClasses;
diff --git a/packages/material-ui/src/DialogTitle/index.d.ts b/packages/material-ui/src/DialogTitle/index.d.ts
index f2d576011232d6..d89654b25f74fe 100644
--- a/packages/material-ui/src/DialogTitle/index.d.ts
+++ b/packages/material-ui/src/DialogTitle/index.d.ts
@@ -1,2 +1,4 @@
export { default } from './DialogTitle';
export * from './DialogTitle';
+export { default as dialogTitleClasses } from './dialogTitleClasses';
+export * from './dialogTitleClasses';
diff --git a/packages/material-ui/src/DialogTitle/index.js b/packages/material-ui/src/DialogTitle/index.js
index 69720d1cddbc6e..52d3ec908acd69 100644
--- a/packages/material-ui/src/DialogTitle/index.js
+++ b/packages/material-ui/src/DialogTitle/index.js
@@ -1 +1,3 @@
export { default } from './DialogTitle';
+export { default as dialogTitleClasses } from './dialogTitleClasses';
+export * from './dialogTitleClasses';