CSS スタイルを使用して ReactJs の入力タグを美しくする

Question

React JS アプリケーションには次のコンポーネントがあります:

const Input = ({name, ..rest}) => {
  戻る （
      <div>
        <input type="text" name={name} {...rest}/>
        {エラー && <span>エラー: あなたの名前を追加してください</span>}
      </div>
  );
};

restパラメータには、必須、className、id など、すべてのReact.InputHTMLAttributesが含まれます。

style 属性を入力コンポーネントに追加しようとして問題が発生しました。次のようなものを追加すると:

margin-bottom: 45px

この場合、入力ボックスとスパンの間に空白スペースが生じますが、この空白はコンポーネント全体のスペースである必要があるため、スペースはコンポーネントの要素間ではなくコンポーネントの下に適用される必要があります。

この問題を回避し、input タグの ...rest 属性を保持するにはどうすればよいですか?

注: style に加えて、className、id、 も同じで使用できます。コンテキスト ;必須など。

Answer 1

rest から style 属性を抽出し、その margin 属性 (以前に設定した) を削除して、カスタム marginBottom: 45# を使用できます。 ##上書きします。 リーリー