Embellissez les balises d'entrée dans ReactJs à l'aide de styles CSS

Question

J'ai le composant suivant dans mon application React JS :

const Input = ({name, ..rest}) =>
  retour (
      

        
        {erreurs && Erreurs : veuillez ajouter votre nom}
      
  );
};
restLes paramètres incluent tous lesReact.InputHTMLAttributes, tels que requis, className, id, etc. 
J'ai du mal à essayer d'ajouter l'attribut style Si j'ajoute quelque chose comme ceci : 
marge inférieure : 45px
 Ensuite, il y aura un espace vide entre la zone de saisie et la travée, mais cet espace doit être l'espacement de l'ensemble du composant, donc l'espacement doit être appliqué sous le composant plutôt qu'entre les éléments du composant. 
Comment puis-je éviter ce problème et conserver l'attribut ...rest sur la balise d'entrée ? 
Remarque : En plus de style, vous pouvez également utiliser className, id,  contexte ;obligatoireetc. 
            

Answer 1

Vous pouvez le remplacer à partir de rest中提取出style属性，然后删除其margin属性（之前设置的），并用您自定义的marginBottom: 45.

const Input = ({ name, style, ...rest }) => {
  const { margin, ...restStyles } = style;
  const newStyles = {
    ...restStyles,
    marginBottom: 45,
  };

  return (
      <div>
        <input type="text" name={name} {...rest} style={newStyles} />
                                               // ^^^^^^^^^ 应用新样式
        {errors && <span>错误：请添加您的姓名</span>}
      </div>
  );
};