Как лучше выносить кастомизацию компонентов библиотеки MUI?

Question

[Егор]

К примеру есть следующий JSX в компоненте:

<Box
      component="form"
      onSubmit={handleLogin}
      sx={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: 'calc(100vh - 64px)'
      }}
    >
      <Card sx={{padding: 5, boxShadow: 3}}>
        <Typography variant="h5" sx={{textAlign: 'center'}}>Вход</Typography>
        ...
      </Card>
</Box>

Каким способом лучше всего будет вынести кастомную стилизацию элементов, заданную с помощью атрибута sx?

Пробовал с использованием функции styled(), описанный пример в документации MUI - https://mui.com/material-ui/customization/how-to-c.... Но проблема в том, что не получается прокинуть children, такой способ у меня сработал только для элементов без дочерних элементов.

Пробовал также вынести атрибуты в отдельный скрипт:

Header.styles.ts:

const headerStyles = {
  AppBar: {
    position: 'static',
    color: 'transparent',
    sx: {
      boxShadow: 1
    }
  }
};

export default headerStyles;

Header.tsx:

...
<AppBar {...headerStyles.AppBar}>
...

В результате typescript кидает ошибку: