在样式组件中使用传播算子分配css属性

I'm making react component with material-UI and styled-components in TypeScript.
While implementing Drawer like this, I have trouble passing css properties to styled components with spread operator.

最初,它是通过这样的useStyles来实现的;

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>
    );
}

I want to write those codes with styled-components, without useStyles.
Currently, my codes are like below, but they don't work well.
I might mistakenly use attr, however I have no idea how to pass css properties with spread operator in styled-components.

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

const $DrawerHeader = styled.div.attrs(props => ({
 // this css properties don't seem assigned
     ...props.theme.mixins.toolbar,
 }))`
 /* the part below works fine */
     display: flex;
     align-items: center;
     padding: ${props => props.theme.spacing(0, 1)};
     justify-content: flex-end;
`;

I referred to this Q&A, but it didn't work for my case.
Can anyone show me clue? Thank you.