Use CSS styles to beautify input tags in ReactJs-PHP Chinese Network Q&A

{errors&&Error: Please add your name});};rest"> Use CSS styles to beautify input tags in ReactJs-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Use CSS styles to beautify input tags in ReactJs

P粉619896145 2023-09-01 17:00:09

565

I have the following component in my React JS application:

const Input = ({name, ..rest}) => { return (   {errors && Errors: Please add your name} 
 ); };

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.

P粉619896145

reply all (1)

P粉5118967162023-09-02 12:25:33 1 floor

You can extract thestyleattribute fromrest, then delete itsmarginattribute (set previously) and use your custommarginBottom: 45override it.

const Input = ({ name, style, ...rest }) => { const { margin, ...restStyles } = style; const newStyles = { ...restStyles, marginBottom: 45, }; return (   // ^^^^^^^^^ 应用新样式 {errors && 错误：请添加您的姓名} 
 ); };