[material-ui][Card] Convert to support CSS extraction (mui#41580)

Author: aacevski

apps/pigment-css-next-app/src/app/material-ui/react-card/page.tsx

@@ -0,0 +1,65 @@
+'use client';
+import * as React from 'react';
+import ActionAreaCard from '../../../../../../docs/data/material/components/cards/ActionAreaCard';
+import BasicCard from '../../../../../../docs/data/material/components/cards/BasicCard';
+import ImgMediaCard from '../../../../../../docs/data/material/components/cards/ImgMediaCard';
+import MediaCard from '../../../../../../docs/data/material/components/cards/MediaCard';
+import MediaControlCard from '../../../../../../docs/data/material/components/cards/MediaControlCard';
+import MultiActionAreaCard from '../../../../../../docs/data/material/components/cards/MultiActionAreaCard';
+import OutlinedCard from '../../../../../../docs/data/material/components/cards/OutlinedCard';
+import RecipeReviewCard from '../../../../../../docs/data/material/components/cards/RecipeReviewCard';
+
+export default function Cards() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Action Area Card</h2>
+        <div className="demo-container">
+          <ActionAreaCard />
+        </div>
+      </section>
+      <section>
+        <h2> Basic Card</h2>
+        <div className="demo-container">
+          <BasicCard />
+        </div>
+      </section>
+      <section>
+        <h2> Img Media Card</h2>
+        <div className="demo-container">
+          <ImgMediaCard />
+        </div>
+      </section>
+      <section>
+        <h2> Media Card</h2>
+        <div className="demo-container">
+          <MediaCard />
+        </div>
+      </section>
+      <section>
+        <h2> Media Control Card</h2>
+        <div className="demo-container">
+          <MediaControlCard />
+        </div>
+      </section>
+      <section>
+        <h2> Multi Action Area Card</h2>
+        <div className="demo-container">
+          <MultiActionAreaCard />
+        </div>
+      </section>
+      <section>
+        <h2> Outlined Card</h2>
+        <div className="demo-container">
+          <OutlinedCard />
+        </div>
+      </section>
+      <section>
+        <h2> Recipe Review Card</h2>
+        <div className="demo-container">
+          <RecipeReviewCard />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

packages/mui-material/src/Card/Card.js

@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Paper from '../Paper';
 import { getCardUtilityClass } from './cardClasses';
 
+const useThemeProps = createUseThemeProps('MuiCard');
+
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -23,10 +24,8 @@ const CardRoot = styled(Paper, {
   name: 'MuiCard',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(() => {
-  return {
-    overflow: 'hidden',
-  };
+})({
+  overflow: 'hidden',
 });
 
 const Card = React.forwardRef(function Card(inProps, ref) {

packages/mui-material/src/CardActionArea/CardActionArea.js

@@ -3,11 +3,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
 import ButtonBase from '../ButtonBase';
 
+const useThemeProps = createUseThemeProps('MuiCardActionArea');
+
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 

packages/mui-material/src/CardActions/CardActions.js

@@ -3,10 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardActionsUtilityClass } from './cardActionsClasses';
 
+const useThemeProps = createUseThemeProps('MuiCardActions');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, disableSpacing } = ownerState;
 
@@ -25,16 +26,21 @@ const CardActionsRoot = styled('div', {
 
     return [styles.root, !ownerState.disableSpacing && styles.spacing];
   },
-})(({ ownerState }) => ({
+})({
   display: 'flex',
   alignItems: 'center',
   padding: 8,
-  ...(!ownerState.disableSpacing && {
-    '& > :not(style) ~ :not(style)': {
-      marginLeft: 8,
+  variants: [
+    {
+      props: { disableSpacing: false },
+      style: {
+        '& > :not(style) ~ :not(style)': {
+          marginLeft: 8,
+        },
+      },
     },
-  }),
-}));
+  ],
+});
 
 const CardActions = React.forwardRef(function CardActions(inProps, ref) {
   const props = useThemeProps({

packages/mui-material/src/CardContent/CardContent.js

@@ -3,10 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardContentUtilityClass } from './cardContentClasses';
 
+const useThemeProps = createUseThemeProps('MuiCardContent');
+
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -21,13 +22,11 @@ const CardContentRoot = styled('div', {
   name: 'MuiCardContent',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(() => {
-  return {
-    padding: 16,
-    '&:last-child': {
-      paddingBottom: 24,
-    },
-  };
+})({
+  padding: 16,
+  '&:last-child': {
+    paddingBottom: 24,
+  },
 });
 
 const CardContent = React.forwardRef(function CardContent(inProps, ref) {

packages/mui-material/src/CardHeader/CardHeader.js

@@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses';
 
+const useThemeProps = createUseThemeProps('MuiCardHeader');
+
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 

packages/mui-material/src/CardMedia/CardMedia.js

@@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardMediaUtilityClass } from './cardMediaClasses';
 
+const useThemeProps = createUseThemeProps('MuiCardMedia');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, isMediaComponent, isImageComponent } = ownerState;
 
@@ -27,19 +28,27 @@ const CardMediaRoot = styled('div', {
 
     return [styles.root, isMediaComponent && styles.media, isImageComponent && styles.img];
   },
-})(({ ownerState }) => ({
+})({
   display: 'block',
   backgroundSize: 'cover',
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'center',
-  ...(ownerState.isMediaComponent && {
-    width: '100%',
-  }),
-  ...(ownerState.isImageComponent && {
-    // ⚠️ object-fit is not supported by IE11.
-    objectFit: 'cover',
-  }),
-}));
+  variants: [
+    {
+      props: { isMediaComponent: true },
+      style: {
+        width: '100%',
+      },
+    },
+    {
+      props: { isImageComponent: true },
+      style: {
+        // ⚠️ object-fit is not supported by IE11.
+        objectFit: 'cover',
+      },
+    },
+  ],
+});
 
 const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 const IMAGE_COMPONENTS = ['picture', 'img'];