使用CSS樣式為ReactJs中的輸入標籤進行美化
P粉619896145
2023-09-01 17:00:09
<p>我在我的React JS應用程式中有以下元件:</p>
<pre class="brush:php;toolbar:false;">const Input = ({name, ..rest}) => {
return (
<div>
<input type="text" name={name} {...rest}/>
{errors && <span>錯誤:請加您的姓名</span>}
</div>
);
};</pre>
<p><code>rest</code>參數包含所有<code>React.InputHTMLAttributes<HTMLInputElement></code>,如required、className、id等。 </p><p>我在嘗試將<code>style</code>屬性加入Input元件時遇到了問題。如果我加入以下內容:</p>
<p><code>margin-bottom:45px</code></p>
<p>那麼在輸入框和span之間會出現空白,但是這個空白應該是整個組件的間距,所以間距應該應用在組件的下方而不是組件的元素之間。 </p>
<p>如何避免這個問題並保留input標籤上的<code>...rest</code>屬性? </p>
<p>注意:除了<code>style</code>之外,還可以在相同的上下文中使用<code>className</code>、<code>id</code>、<code>、<code>id</code>、<code>、<code> ;required</code>等。 </p>
您可以從
rest
中提取出style
屬性,然後刪除其margin
屬性(先前設定的),並用您自訂的marginBottom: 45
覆蓋它。