title: Styling specific column of the MUI DataGrid
body: <p>I would like to center a IconButton that is inside a DataGrid tabe (all of them are MUI components). I've read the documentation and tried several things. In my last attempt I did this:</p>
  <p><strong>GridComponent.js</strong></p>
  <p>What I did here is assign <strong>'like-grid-button'</strong> to the cellClassName at the column that I'm interested (likebutton).</p>
  <pre><code>import { DataGrid } from '@material-ui/data-grid';
  import { randomCreatedDate } from '@mui/x-data-grid-generator'; //for examples
  import FavoriteBorderRoundedIcon from '@mui/icons-material/FavoriteBorderRounded'; //fav icon shape
  import { IconButton } from '@material-ui/core';
  import React from 'react';
  
  const ActivityTypes = ['Museum', 'Restaurant', 'Sight Seen', 'Shoping'];
  const rows = [
    { id: 1, Name: 'Gamla Stan', Type: 'Sight Seen', date: randomCreatedDate() },
    { id: 2, Name: 'Vasamuseet', Type: 'Museum', date: randomCreatedDate() }
  ];
  
  const columns = [
    { field: 'id', headerName: 'ID', width: 100 },
    { field: 'Name', headerName: 'Name', width: 130 },
    {
      field: 'Type',
      headerName: 'Type',
      type: 'singleSelect',
      valueOptions: ActivityTypes,
      width: 130
    },
    {
      field: 'date',
      headerName: 'Date',
      type: 'date',
      width: 130
    },
    {
      field: 'likebutton',
      headerName: 'Favourite',
      sortable: false,
      width: 130,
      cellClassName: 'like-grid-button',
      renderCell: (params) =&gt; {
        return (
          &lt;IconButton index={params.row.id}&gt;
            &lt;FavoriteBorderRoundedIcon /&gt;
          &lt;/IconButton&gt;
        );
      }
    }
  ];
  
  export default function DataTable() {
    return (
      &lt;div style={{ height: 400, width: '100%' }}&gt;
        &lt;DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          rowsPerPageOptions={[5]}
          disableColumnSelector
          disableSelectionOnClick
          checkboxSelection
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>style.css</strong></p>
  <p>Here I just added what I wanted at 'like-grid-button' class</p>
  <pre><code>.like-grid-button {
      justify-content: center;
  }
  </code></pre>
  <p><strong>index.js</strong>
  Here I added the <code>&lt;StyledEngineProvider injectFirst&gt;</code> so MUI doesn't overrides style. However, when I test this, it gets overwritten anyway.</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './style.css';
  import StyledEngineProvider from '@mui/material/StyledEngineProvider';
  import App from './App';
  
  ReactDOM.render(
    &lt;StyledEngineProvider injectFirst&gt;
      &lt;React.StrictMode&gt;
        &lt;App /&gt;
      &lt;/React.StrictMode&gt;
    &lt;/StyledEngineProvider&gt;,
    document.getElementById('root')
  );
  
  </code></pre>
  <p>I also tried other approaches like using <code>makeStyles()</code>but i can't find/understand a way to change the justify-content of just one column.</p>
  <p>Thank you,</p>