styled-componentsにspread operatorでcss propertiesを渡したい

Question

#前提・実現したいこと
TypeScript, Material-UI, styled-componentsでReactの開発をしています。
Material-UIのオリジナルではuseStylesでスタイリングされているのを、styled-componentsに代替しようとしています。

#発生している問題
Drawerの実装で、spread operatorでcss propertiesをコピーしたいのですが、styled-componentsでうまく実装できません。
attrsの使い方が誤っているのかなと推測しているのですが、ドキュメントを見ても理解できませんでした。

#該当のソースコード
元のコード：

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        drawerHeader: {
            display: 'flex',
            alignItems: 'center',
            padding: theme.spacing(0, 1),
            // necessary for content to be below app bar
            ...theme.mixins.toolbar,
            justifyContent: 'flex-end',
          }, 
    }),
    );

const SideDrawerHeader: React.FC = (props) => {
    const classes = useStyles();
    const theme = useTheme();
    return (
        <div className={classes.drawerHeader}>
            {props.children}
        </div>
    );
}

styled-componentsで代用しようとしているコード：

const SideDrawerHeader: React.FC = (props) => {
    const classes = useStyles();
    const theme = useTheme();
    return (
        <$DrawerHeader>
            {props.children}
        </$DrawerHeader>
    );
}

const $DrawerHeader = styled.div.attrs(props => ({
    ...props.theme.mixins.toolbar,
}))`
    display: flex;
    align-items: center;
    padding: ${props => props.theme.spacing(0, 1)};
    justify-content: flex-end;
`;

#試してみたこと
この質問を見たりしたのですが、今回のケースでは参考にできませんでした。

Comments

[m.ts10806]

MaterializeとMaterial-UIは別物です

[tacro]

タグを誤っておりました、修正いたしました！ご指摘ありがとうございます。