how to give margin to a functional component in react.js?

Question

here is my code that is returned by functional component:

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>

  );

i want to give left right margin to it ....how to do it ? when i type margin as attribute in <div className="card border-0 shadow " > ,it gives error

error:

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

Duplicate: [How to apply CSS and Styling to a React component](https://stackoverflow.com/questions/38545219/how-to-apply-css-and-styling-to-a-react-component) — , Mar 15 '21 at 08:29

score 2 · Accepted Answer · answered Mar 15 '21 at 08:27

2

Here is what you need

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

answered Mar 15 '21 at 08:27

aholake

66
2

score 1 · Answer 2 · answered Mar 15 '21 at 08:26

1

You can use style attribute:

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

Or you can add the margin via CSS:

.card {
   margin: 20px;
}

answered Mar 15 '21 at 08:26

T J

42,762
13
83
138

how to give margin to a functional component in react.js?

2 Answers2