Proper inheritance/reuse in styled-components?

Question

React

What is the best way to link styled-components for reuse?
There are different forms on the project, which can change different parameters, but at the same time there is the same moment - indents. There is a title, then there are form fields, then the submit button.

I tried to make a base component like this:

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;
`

And then the login form looks like this:

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>

Does such a construction of components look normal? Or would it be more correct to put AppForm styles into mixins and just mix them into LoginForm components?

It's just that after BEM it's a little hard to rebuild, given a slightly different approach to "mixes" and other different moments, so I would like to understand if the approach is normal.