Overriding Styles in Material UI in React

Question

I have a problem overriding the styles in my theme in Material UI in React. I wanted to customize the border of columnsContainer but it isn't working. only the root is working well.

Check Here for Codesanbox

MuiDataGrid.js

export default {
  root: {
    backgroundColor: "white",
    border: `1px solid green`,
    "& .columnsContainer": {
      borderBottom: `1px solid 'blue' !important`
    }
  }
};

Answer 1

Below is the correct syntax. The changes compared to your code sandbox are:

1. Replace .columnsContainer with .MuiDataGrid-columnsContainer
2. Correct the borderBottom syntax to be 1px solid blue instead of 1px solid 'blue' !important.

export default {
  root: {
    backgroundColor: "white",
    border: `1px solid green`,
    "& .MuiDataGrid-columnsContainer": {
      borderBottom: `1px solid blue`
    }
  }
};