diff --git a/docs/pages/api-docs/card-content.json b/docs/pages/api-docs/card-content.json
index c0b94494591be0..a9d46900c13957 100644
--- a/docs/pages/api-docs/card-content.json
+++ b/docs/pages/api-docs/card-content.json
@@ -2,7 +2,8 @@
"props": {
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" } },
- "component": { "type": { "name": "elementType" } }
+ "component": { "type": { "name": "elementType" } },
+ "sx": { "type": { "name": "object" } }
},
"name": "CardContent",
"styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiCardContent" },
@@ -11,6 +12,6 @@
"filename": "/packages/material-ui/src/CardContent/CardContent.js",
"inheritance": null,
"demos": "
",
- "styledComponent": false,
+ "styledComponent": true,
"cssComponent": false
}
diff --git a/docs/translations/api-docs/card-content/card-content.json b/docs/translations/api-docs/card-content/card-content.json
index 9fbaf3f4099185..040b25c849be29 100644
--- a/docs/translations/api-docs/card-content/card-content.json
+++ b/docs/translations/api-docs/card-content/card-content.json
@@ -3,7 +3,8 @@
"propDescriptions": {
"children": "The content of the component.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
- "component": "The component used for the root node. Either a string to use a HTML element or a component."
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": { "root": { "description": "Styles applied to the root element." } }
}
diff --git a/packages/material-ui/src/CardContent/CardContent.d.ts b/packages/material-ui/src/CardContent/CardContent.d.ts
index ca35743820e0eb..476d22b4f782c6 100644
--- a/packages/material-ui/src/CardContent/CardContent.d.ts
+++ b/packages/material-ui/src/CardContent/CardContent.d.ts
@@ -1,5 +1,7 @@
import * as React from 'react';
+import { SxProps } from '@material-ui/system';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { Theme } from '..';
export interface CardContentTypeMap {
props: P & {
@@ -14,6 +16,10 @@ export interface CardContentTypeMap
/** Styles applied to the root element. */
root?: string;
};
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx?: SxProps;
};
defaultComponent: D;
}
diff --git a/packages/material-ui/src/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js
index 93fbfdc0e71b33..513748de2f1916 100644
--- a/packages/material-ui/src/CardContent/CardContent.js
+++ b/packages/material-ui/src/CardContent/CardContent.js
@@ -1,22 +1,62 @@
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 experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
+import { getCardContentUtilityClass } from './cardContentClasses';
-export const styles = {
+const overridesResolver = (props, styles) => styles.root || {};
+
+const useUtilityClasses = (styleProps) => {
+ const { classes } = styleProps;
+
+ const slots = {
+ root: ['root'],
+ };
+
+ return composeClasses(slots, getCardContentUtilityClass, classes);
+};
+
+const CardContentRoot = experimentalStyled(
+ 'div',
+ {},
+ {
+ name: 'MuiCardContent',
+ slot: 'Root',
+ overridesResolver,
+ },
+)(() => {
/* Styles applied to the root element. */
- root: {
+ return {
padding: 16,
'&:last-child': {
paddingBottom: 24,
},
- },
-};
+ };
+});
+
+const CardContent = React.forwardRef(function CardContent(inProps, ref) {
+ const props = useThemeProps({
+ props: inProps,
+ name: 'MuiCardContent',
+ });
+
+ const { className, component = 'div', ...other } = props;
-const CardContent = React.forwardRef(function CardContent(props, ref) {
- const { classes, className, component: Component = 'div', ...other } = props;
+ const styleProps = { ...props, component };
- return ;
+ const classes = useUtilityClasses(styleProps);
+
+ return (
+
+ );
});
CardContent.propTypes = {
@@ -41,6 +81,10 @@ CardContent.propTypes = {
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx: PropTypes.object,
};
-export default withStyles(styles, { name: 'MuiCardContent' })(CardContent);
+export default CardContent;
diff --git a/packages/material-ui/src/CardContent/CardContent.test.js b/packages/material-ui/src/CardContent/CardContent.test.js
index 6eea231c090e00..3b7d7e48d540b2 100644
--- a/packages/material-ui/src/CardContent/CardContent.test.js
+++ b/packages/material-ui/src/CardContent/CardContent.test.js
@@ -1,20 +1,18 @@
import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
+import { createMount, describeConformanceV5 } from 'test/utils';
import CardContent from './CardContent';
+import classes from './cardContentClasses';
describe('', () => {
const mount = createMount();
- let classes;
- before(() => {
- classes = getClasses();
- });
-
- describeConformance(, () => ({
+ describeConformanceV5(, () => ({
classes,
inheritComponent: 'div',
mount,
+ muiName: 'MuiCardContent',
refInstanceof: window.HTMLDivElement,
+ skip: ['componentsProp', 'themeVariants'],
testComponentPropWith: 'span',
}));
});
diff --git a/packages/material-ui/src/CardContent/cardContentClasses.d.ts b/packages/material-ui/src/CardContent/cardContentClasses.d.ts
new file mode 100644
index 00000000000000..41ee3c26c41405
--- /dev/null
+++ b/packages/material-ui/src/CardContent/cardContentClasses.d.ts
@@ -0,0 +1,9 @@
+export interface CardContentClasses {
+ root: string;
+}
+
+declare const cardContentClasses: CardContentClasses;
+
+export function getCardContentUtilityClass(slot: string): string;
+
+export default cardContentClasses;
diff --git a/packages/material-ui/src/CardContent/cardContentClasses.js b/packages/material-ui/src/CardContent/cardContentClasses.js
new file mode 100644
index 00000000000000..b156806da5a937
--- /dev/null
+++ b/packages/material-ui/src/CardContent/cardContentClasses.js
@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getCardContentUtilityClass(slot) {
+ return generateUtilityClass('MuiCardContent', slot);
+}
+
+const cardContentClasses = generateUtilityClasses('MuiCardContent', ['root']);
+
+export default cardContentClasses;
diff --git a/packages/material-ui/src/CardContent/index.d.ts b/packages/material-ui/src/CardContent/index.d.ts
index a217109e6ac419..76f1a0d2ab8e67 100644
--- a/packages/material-ui/src/CardContent/index.d.ts
+++ b/packages/material-ui/src/CardContent/index.d.ts
@@ -1,2 +1,4 @@
export { default } from './CardContent';
export * from './CardContent';
+export { default as cardContentClasses } from './cardContentClasses';
+export * from './cardContentClasses';
diff --git a/packages/material-ui/src/CardContent/index.js b/packages/material-ui/src/CardContent/index.js
index 7baf6f04f0efc2..ddb366fe55c431 100644
--- a/packages/material-ui/src/CardContent/index.js
+++ b/packages/material-ui/src/CardContent/index.js
@@ -1 +1,3 @@
export { default } from './CardContent';
+export { default as cardClasses } from './cardContentClasses';
+export * from './cardContentClasses';