[styled-engine] Drop withComponent support

mui · Aug 15, 2021 · 6db4277 · 6db4277
1 parent 5314e42
commit 6db4277
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 44 deletions.
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
@@ -6,39 +6,37 @@ import ButtonBase from '@material-ui/core/ButtonBase';
 import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 import Link from 'docs/src/modules/components/Link';
 
-const Item = styled('div', {
-  shouldForwardProp:
-    // disable `as` prop
-    () => true,
-})(({ theme }) => {
-  return {
-    ...theme.typography.body2,
-    display: 'flex',
-    borderRadius: theme.shape.borderRadius,
-    outline: 0,
-    width: '100%',
-    paddingTop: 8,
-    paddingBottom: 8,
-    justifyContent: 'flex-start',
-    fontWeight: theme.typography.fontWeightMedium,
-    transition: theme.transitions.create(['color', 'background-color'], {
-      duration: theme.transitions.duration.shortest,
-    }),
-    '&:hover': {
-      color: theme.palette.text.primary,
-      backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-    },
-    '&.Mui-focusVisible': {
-      backgroundColor: theme.palette.action.focus,
-    },
-    [theme.breakpoints.up('md')]: {
-      paddingTop: 6,
-      paddingBottom: 6,
-    },
-  };
-});
+const Item = styled(({ component: Component = 'div', ...props }) => <Component {...props} />)(
+  ({ theme }) => {
+    return {
+      ...theme.typography.body2,
+      display: 'flex',
+      borderRadius: theme.shape.borderRadius,
+      outline: 0,
+      width: '100%',
+      paddingTop: 8,
+      paddingBottom: 8,
+      justifyContent: 'flex-start',
+      fontWeight: theme.typography.fontWeightMedium,
+      transition: theme.transitions.create(['color', 'background-color'], {
+        duration: theme.transitions.duration.shortest,
+      }),
+      '&:hover': {
+        color: theme.palette.text.primary,
+        backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      },
+      '&.Mui-focusVisible': {
+        backgroundColor: theme.palette.action.focus,
+      },
+      [theme.breakpoints.up('md')]: {
+        paddingTop: 6,
+        paddingBottom: 6,
+      },
+    };
+  },
+);
 
-const ItemLink = styled(Item.withComponent(Link), {
+const ItemLink = styled(Item, {
   shouldForwardProp: (prop) => prop !== 'depth',
 })(({ depth, theme }) => {
   return {
@@ -78,7 +76,7 @@ const ItemButtonIcon = styled(ArrowRightIcon, {
   };
 });
 
-const ItemButton = styled(Item.withComponent(ButtonBase), {
+const ItemButton = styled(Item, {
   shouldForwardProp: (prop) => prop !== 'depth',
 })(({ depth, theme }) => {
   return {
@@ -120,6 +118,7 @@ export default function AppNavDrawerItem(props) {
     return (
       <StyledLi {...other} depth={depth}>
         <ItemLink
+          component={Link}
           activeClassName="app-drawer-active"
           href={href}
           underline="none"
@@ -136,6 +135,7 @@ export default function AppNavDrawerItem(props) {
   return (
     <StyledLi {...other} depth={depth}>
       <ItemButton
+        component={ButtonBase}
         depth={depth}
         disableRipple
         className={topLevel && 'algolia-lvl0'}

diff --git a/packages/material-ui-system/src/createStyled.d.ts b/packages/material-ui-system/src/createStyled.d.ts
@@ -77,17 +77,7 @@ export type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>;
 
 export interface StyledComponent<InnerProps, StyleProps, Theme extends object>
   extends React.FunctionComponent<InnerProps & StyleProps & { theme?: Theme }>,
-    ComponentSelector {
-  /**
-   * @desc this method is type-unsafe
-   */
-  withComponent<NewTag extends keyof JSX.IntrinsicElements>(
-    tag: NewTag,
-  ): StyledComponent<JSX.IntrinsicElements[NewTag], StyleProps, Theme>;
-  withComponent<Tag extends React.JSXElementConstructor<any>>(
-    tag: Tag,
-  ): StyledComponent<PropsOf<Tag>, StyleProps, Theme>;
-}
+    ComponentSelector {}
 
 export interface StyledOptions {
   label?: string;