将带有makeStyles的Material-UI Drawer转换为带有样式组件的一个

Question

我正在使用TypeScript，Material-UI和样式化组件制作React应用。

在实施SideDrawer with Material-UI Drawer component时， 我正在将最初与makeStyles一起的代码重写为带样式的组件，因为它更易于维护。
但是，在此步骤中，在通过样式组件传递一些道具时遇到问题。

我正在尝试解决，但现在不知道了。
谁能告诉我这是怎么回事？

原始代码；

...
// 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>'"
    I get this error and can't pass props properly.
   */
    ${({ open, props }) => open && `
        width: calc(100% - ${drawerWidth}px);
        margin-left: ${drawerWidth};
        transition: ${
　　　　　/* Then, VS Code tells "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,
            })
        };
    `}
`;
...
//tsx
<$AppBar
    position="fixed"
    open={open}
   >
    ...
</$AppBar>

Answer 1

我已经用这种方式彻底弄清楚了！
我错误地用大括号{}包裹了'props'关键字。

    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,
        })
    };
    ${(props) => props.open && `
        width: calc(100% - ${drawerWidth}px);
        margin-left: ${drawerWidth};
        transition: ${
                props.theme.transitions.create(['margin', 'width'], {
                easing: props.theme.transitions.easing.easeOut,
                duration: props.theme.transitions.duration.enteringScreen,
            })
        };
    `}
`;