Use CSS styles to beautify input tags in ReactJs

Question

I have the following component in my React JS application:

const Input = ({name, ..rest}) => {
  return (
      <div>
        <input type="text" name={name} {...rest}/>
        {errors && <span>Errors: Please add your name</span>}
      </div>
  );
};

restThe parameters include allReact.InputHTMLAttributes, such as required, className, id, etc.

I'm having trouble trying to add the style attribute to an Input component. If I add something like this:

margin-bottom: 45px

Then there will be a blank space between the input box and span, but this blank should be the spacing of the entire component, so the spacing should be applied below the component rather than between the elements of the component.

How can I avoid this problem and preserve the ...rest attribute on the input tag?

Note: In addition to style, you can also use className, id, in the same context ;requiredetc.

Answer 1

You can extract the style attribute from rest, then delete its margin attribute (set previously) and use your custom marginBottom: 45override it.

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>
  );
};