Правильное наследование/переиспользование в styled-components?

Question

[eugenedrvnk]

Как правильнее скомпоновать styled-components для переиспользования?
На проекте есть разные формы, у которых могут меняться разные параметры, но при этом есть и одинаковый момент - отступы. Есть тайтл, потом идут поля формы, потом кнопа отправки.

Я попытался сделать такой базовый компонент :

const AppForm = styled.form``
AppForm.Title = styled.h1`
  margin-bottom: 20px;
`
AppForm.Field = styled(TextField)`
  margin-bottom: 10px;
`
AppForm.Button = styled(Button)`
  margin-top: 20px;
`

И дальше форма логина вылядит так :

const LoginForm = styled(AppForm)`
  width: 500px;
`
LoginForm.Image = styled(AppForm.Field)`
  margin: 50px 0;
`

LoginForm.Image.defaultProps = {
  as: 'img'
}

<LoginForm>
  <AppForm.Field/>
  <AppForm.Field/>
  <LoginForm.Image/>
  <AppForm.Button>Submit</AppForm.Button>
</LoginForm>

Нормально ли выглядит такое построение компонентов? Или правильнее было вынести стили AppForm в миксины и просто примиксовывать их к компонентам LoginForm?

Просто после БЭМа немного тяжеловато перестроиться, учитывая немного другой подход к "миксам" и ещё разные моменты, по этому хотелось бы понять, нормальный ли подход.