MUI 5 - border radius on table body and table footer not working

usernath1 0
Viewed 48

I am working on a new project (React 18.2 and MUI 5.10.3) I have to create a table with particular styles in one of my components.

  1. table head should not have a border
  2. table body must have a border-radius
  3. if the table footer exists, it must have a border-bottom radius

my problem is the border radius is not working on MUI tables. how can I add border-radius and remove the table head border? just like the pic I attached

by the way, I have searched many times I didn't find any good solution

this is what I made (without any extra styles): https://codesandbox.io/s/angry-agnesi-t3ux1x?file=/src/App.tsx

and this is what I want to create: enter image description here

material-ui html-table reactjs typescript css
1 Answers

I think overwrite datagrid with

sx={
".MuiDataGrid-root": {
        borderRadius:"50px",
    },
".MuiDataGrid-columnHeaders": {
        display:'none',
    }
}
Datisekai0
Related