将css应用于ReactJs中的输入标记

z2acfund 于 2022-11-19 发布在 React

关注(0)|答案(1)|浏览(151)

我的react js应用程序中有下一个组件：

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

rest参数包含所有React.InputHTMLAttributes<HTMLInputElement>，如必需的、类名、ID等。
我遇到了一个问题，试图添加style prop到输入组件。在这种方式下，如果我将添加像：
margin-bottom: 45px
那么在input和span之间将出现空间，但是该空间应该用于整个组件，所以边距应该应用于组件下面，而不是组件的元素之间。
如何避免将...rest保留在输入标记上的问题？
注意：除了style之外，还可以在相同的上下文中使用className、id、required等。

css

来源：https://stackoverflow.com/questions/74459861/apply-css-to-input-tag-in-reactjs

1条答案

按热度按时间

bjg7j2ky1#

您可以从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} />
                                               // ^^^^^^^^^ applying new styles
        {errors && <span>Error: Please add your name</span>}
      </div>
  );
};

赞(0）回复(0）举报 2022-11-19

我来回答

将css应用于ReactJs中的输入标记

1条答案

相关问题

热门标签

最新问答