我试图将类名添加到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类的方法?如果是这样,怎么办? *
.input
.button
您需要提供className包装器/容器,styled-component以通过其注入样式:
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; } `;