Let's first change all the buttons to use the Material-UI Button component. Import Button to the AddCar.js file:

// AddCar.js
import Button from '@material-ui/core/Button';

Change the buttons to use the Button component. In the list page, we are using the outlined button and in the modal form, we use buttons without any borders. The following code shows the AddCar component:

return (
    <div>
      <Button variant="outlined" color="primary" style={{margin: 10}} onClick={handleClickOpen}>
        New Car
      </Button>
      <Dialog open={open} onClose={handleClose}>
          <DialogTitle>New car</DialogTitle>
          <DialogContent>
            <input type="text" placeholder="Brand" name="brand" 
              value={car.brand} onChange={handleChange}/><br/> 
            <input type="text" placeholder="Model" name="model" 
              value={car.model} onChange={handleChange}/><br/>
            <input type="text" placeholder="Color" name="color" 
              value={car.color} onChange={handleChange}/><br/>
            <input type="text" placeholder="Year" name="year" 
              value={car.year} onChange={handleChange}/><br/>
            <input type="text" placeholder="Price" name="price" 
              value={car.price} onChange={handleChange}/><br/>
          </DialogContent>
          <DialogActions>
            <Button color="secondary" onClick={handleClose}>Cancel</Button>
            <Button color="primary" onClick={handleSave}>Save</Button>
          </DialogActions>
        </Dialog> 
    </div>
  );

Now, the list page button should look like the following:

And the modal form buttons should look like the following:

We also need to change the buttons in the EditCar component. The button that opens the modal form is the Edit button, which is shown in the table. Therefore, we use the button without borders and set the size to small. Refer to the following source code of the EditCar component: 

return (
  <div>
    <Button color="primary" size="small" onClick={handleClickOpen}>Edit</Button>
    <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Edit car</DialogTitle>
        <DialogContent>
          <input type="text" placeholder="Brand" name="brand" 
            value={car.brand} onChange={handleChange}/><br/> 
           <input type="text" placeholder="Model" name="model" 
             value={car.model} onChange={handleChange}/><br/>
           <input type="text" placeholder="Color" name="color" 
             value={car.color} onChange={handleChange}/><br/>
           <input type="text" placeholder="Year" name="year" 
             value={car.year} onChange={handleChange}/><br/>
           <input type="text" placeholder="Price" name="price" 
             value={car.price} onChange={handleChange}/><br/>
        </DialogContent>
        <DialogActions>
            <Button color="secondary" onClick={handleClose}>Cancel</Button>
            <Button color="primary" onClick={handleSave}>Save</Button>
         </DialogActions>
     </Dialog> 
 </div>
);

We also use the Button component in the car table and define the button size as small for the Delete button in carlist.js. Refer to the following source code for the table columns:

// Carlist.js render() method
const columns = [{
    Header: 'Brand',
    accessor: 'brand'
  }, {
    Header: 'Model',
    accessor: 'model',
  }, {
    Header: 'Color',
    accessor: 'color',
  }, {
    Header: 'Year',
    accessor: 'year',
  }, {
    Header: 'Price €',
    accessor: 'price',
  }, {
    sortable: false,
    filterable: false,
    width: 100, 
    accessor: '_links.self.href',
    Cell: ({value, row}) => (<EditCar car={row} link={value} updateCar={this.updateCar} 
              fetchCars={this.fetchCars} />),
  }, {
    sortable: false,
    filterable: false,
    width: 100,
    accessor: '_links.self.href',
    Cell: ({value}) => (<Button size="small" color="secondary" 
        onClick={()=>{this.onDelClick(value)}}>Delete</Button>)
  }]

Now, the table should look like the following:

The table is now ready, with the styled buttons and the filtering and sorting functionalities.