将类添加到样式化组件

Question

我正在尝试向 React 组件添加 class 名称，以便我可以更轻松地使用 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 classes 而无需 创建包装器 class，即通过实际导入的 class 本身？如果可以，怎么做？

Answer 1

您需要为 wrapper/container 提供 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;
  }
`;

Answer 2

只需使用 attrs 向现有样式组件添加额外属性 className。

const FormWrapper = styled.div.attrs({
  className: 'SignupForm',
  })`
    .input {
    /* Custom Styles */
    }

   .button {
   /* Custom Styles */
   }
   `

将类添加到样式化组件

Add Classes to Styled Component

javascript

reactjs

styled-components

将 类 添加到样式化组件

Add Classes to Styled Component

javascript

reactjs

styled-components

将类添加到样式化组件