Material-UIのDrawerコンポーネントで、makeStylesで定義されてるCSSをstyled-componentに書き直したい

Question

#前提・実現したいこと
TypeScript, Material-UI, styled-componentsを使ってReactアプリを開発しています。
Material-UIのDrawerコンポーネントを使ってSideDrawerを実装しているのですが、
スタイリングはstyled-componentsで管理したく、makeStylesで書かれているものをリライトしている最中に、うまくpropsを参照できない問題が発生しています。

#発生している問題
元のコード

...
// styling
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    ...
    },
    appBar: {
      transition: theme.transitions.create(['margin', 'width'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
    },
    appBarShift: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
      transition: theme.transitions.create(['margin', 'width'], {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    ...
  }),
);

//tsx
...
<AppBar
    position="fixed"
    className={clsx(classes.appBar, {
     [classes.appBarShift]: open,
    })}
   >
    ...
</AppBar>
...

上記のコードを、下記のように書き直そうとしています。

//styled-components having $ as prefix
const $AppBar = styled(AppBar)<{open: boolean}>`
    transition: ${
        props => props.theme.transitions.create(['margin', 'width'], {
            easing: props.theme.transitions.easing.sharp,
            duration: props.theme.transitions.duration.leavingScreen,
        })
    };
　　/* 
    "Property 'props' does not exist on type
    'AppBarProps & { open: boolean; } & ThemeProps<any>'"
    というエラーが出て、propsをうまく参照することができません。
   */
    ${({ open, props }) => open && `
        width: calc(100% - ${drawerWidth}px);
        margin-left: ${drawerWidth};
        transition: ${
　　　　　/* なので"Parameter 'props' implicitly has an 'any' type."になってしまいます。 */
            props => props.theme.transitions.create(['margin', 'width'], {
                easing: props.theme.transitions.easing.easeOut,
                duration: props.theme.transitions.duration.enteringScreen,
            })
        };
    `}
`;
...
//jsx
<$AppBar
    position="fixed"
    open={open}
   >
    ...
</$AppBar>

この時、openによってconditionalにスタイリングしたいのですが、themeの参照に必要なpropsを指示してくれません。

#試してみたこと
下記のように型を指定しようと試みたのですが、上手くいきません。

${({ open, props: ThemedStyledProps }) => open && `
        ...
    `}

ご教示いただけると幸いです。

Answer 1

自己解決しました！
stackoverflowで同じこと書いたのでそちらのリンク参照ください。
Transforming Material-UI Drawer with makeStyles into one with styled-component