如何为 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

这就是你需要的

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

Answer 2

你可以使用style属性：

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

或者您可以通过 CSS 添加边距：

.card {
   margin: 20px;
}