使用CSS樣式為ReactJs中的輸入標籤進行美化

Question

我在我的React JS應用程式中有以下元件：

const Input = ({name, ..rest}) => {
  return (
      <div>
        <input type="text" name={name} {...rest}/>
        {errors && <span>錯誤：請加您的姓名</span>}
      </div>
  );
};

rest參數包含所有React.InputHTMLAttributes，如required、className、id等。

我在嘗試將style屬性加入Input元件時遇到了問題。如果我加入以下內容：

margin-bottom：45px

那麼在輸入框和span之間會出現空白，但是這個空白應該是整個組件的間距，所以間距應該應用在組件的下方而不是組件的元素之間。

如何避免這個問題並保留input標籤上的...rest屬性？

注意：除了style之外，還可以在相同的上下文中使用className、id、、id、、 ;required等。

Answer 1

您可以從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>
  );
};