スタイル付きコンポーネントにクラスを追加する質問する

2024-07-06 • tag-icon

Styled Components を使用して React コンポーネントを簡単にカスタマイズできるように、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クラスにアクセスする方法があるかどうか疑問に思っていますそれなしラッパークラスを作成する必要がありますか (つまり、実際にインポートされたクラス自体を介して)? もしそうなら、どのようにしますか?

ベストアンサー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;
  }
`;

ベストアンサー1

おすすめ記事