IT技术 - 向样式化组件添加类 - 吾爱随笔录

我正在尝试将类名添加到 React 组件，以便我可以更轻松地使用样式化组件自定义该组件。以下是该组件的简化轮廓：

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类而无需创建包装类，即通过实际导入的类本身？如果是这样，如何？