[styled-engine] Drop withComponent support

mui · Aug 15, 2021 · 2543a42 · 2543a42
1 parent 5314e42
commit 2543a42
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 21 deletions.
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
@@ -6,12 +6,8 @@ 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 {
+const Item = styled(({ component: Component = 'div', ...props }) => <Component {...props} />)(
+  ({ theme }) => ({
     ...theme.typography.body2,
     display: 'flex',
     borderRadius: theme.shape.borderRadius,
@@ -35,10 +31,10 @@ const Item = styled('div', {
       paddingTop: 6,
       paddingBottom: 6,
     },
-  };
-});
+  }),
+);
 
-const ItemLink = styled(Item.withComponent(Link), {
+const ItemLink = styled(Item, {
   shouldForwardProp: (prop) => prop !== 'depth',
 })(({ depth, theme }) => {
   return {
@@ -78,7 +74,7 @@ const ItemButtonIcon = styled(ArrowRightIcon, {
   };
 });
 
-const ItemButton = styled(Item.withComponent(ButtonBase), {
+const ItemButton = styled(Item, {
   shouldForwardProp: (prop) => prop !== 'depth',
 })(({ depth, theme }) => {
   return {
@@ -120,6 +116,7 @@ export default function AppNavDrawerItem(props) {
     return (
       <StyledLi {...other} depth={depth}>
         <ItemLink
+          component={Link}
           activeClassName="app-drawer-active"
           href={href}
           underline="none"
@@ -136,6 +133,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;