Добавить классы к стилизованному компоненту

Question

Я пытаюсь добавить имена классов в React Component, чтобы мне было проще настроить этот компонент с помощью Styled Components. Вот упрощенная схема компонента

const SignupForm = props => (
    <form>
      <Input className="input" />
      <Button className="button" />
    </form>
  )

И вот как я хотел бы использовать его:

import { SignupForm } from '../path/to/signup-form'

  <Form />
...

const Form = styled(SignupForm)`
  .input {
     /* Custom Styles */
  }

  .button {
     /* Custom Styles */
  }
`

Однако это не работает. Только если я создаю Компонент оболочки, он будет работать - вот так:

import { SignupForm } from '../path/to/signup-form'

  <FormWrapper>
    <SignupForm/>
  <FormWrapper>
...

const FormWrapper = styled.div`
  .input {
     /* Custom Styles */
  }

  .button {
     /* Custom Styles */
  }
`

Меня интересует, есть ли способ доступа к .input и .button классам без необходимости создавать класс-оболочку - т.е. через сам фактический импортированный класс?

Если да, то как?

Спасибо.

Answer 1

Вы должны предоставить className для оболочки / контейнера как styled-component, вводя стили через него:

const SignupForm = ({ className }) => (
  <form className={className}>
    <input className="input" />
    <button className="button">Button</button>
  </form>
);

const Form = styled(SignupForm)`
  .input {
    background-color: palegreen;
  }

  .button {
    background-color: palevioletred;
  }
`;