如何為 react.js 中的功能組件留出余量？

Question

這是功能組件返回的我的代碼：

return (

    <div className="card border-0 shadow " >
      <div className="card-header">Update a Book</div>
      <div className="card-body">
        <form onSubmit={(e) => onUpdateContact(e)}>
          <div className="form-group">
        
            <TextField
            id="outlined-helperText"
            label="Enter The Name"
            defaultValue={n}
            onChange={(e) => setName(e.target.value)}
            variant="outlined"
            
          />
          </div>
          <div className="form-group">
           
            <TextField
            id="outlined-helperText"
            label="Enter The Isbn"
            defaultValue={isb}
            onChange={(e) => setIsbn(e.target.value)}
            variant="outlined"
            
          />
          </div>
      
         
          <button className="btn btn-warning" type="submit">
            Update Book
          </button>
        </form>
      </div>
    </div>

  );

我想給它左邊距....怎么做？ 當我在<div className="card border-0 shadow " >中輸入邊距作為屬性時，它會給出錯誤

錯誤：

<div className="card border-0 shadow " margin=20px >

Answer 1

您可以使用style屬性：

<div className="card border-0 shadow" style={{margin: 20}} >

或者您可以通過 CSS 添加邊距：

.card {
   margin: 20px;
}

Answer 2

這是你需要的

 <div style={{margin: '0 20px'}}>...Your content </div>