小编典典

将类添加到样式化的组件

reactjs

我试图将类名添加到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类的方法?如果是这样,怎么办? *


阅读 278

收藏
2020-07-22

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

编辑hungry-moser-3lu0p

2020-07-22