How to give round corners to the TableHead of Material UI

Question

I am working with React and Material UI and I am trying to give a broder-radius of 10px to the header of the table so that only the TableHead have round corners. The problem is that border-radius doesn't seem to work at all on TableHead as you can see in this screenshot:

Code (taken from the official docs, I just added the style to the TableHead):


  
      
        Dessert (100g serving)
        Calories
        Fat (g)
        Carbs (g)
        Protein (g)
      
    
      {rows.map((row) => (
        
          
            {row.name}
          
          {row.calories}
          {row.fat}
          {row.carbs}
          {row.protein}
        
      ))}
    
    
    
  
;

How do I get this done?

user_8690857 · Answer

You can continue using the makeStyles hook generator to style the table header.

import { makeStyles } from '@material-ui/core/styles';

const useTableHeaderStyles = makeStyles({
  // .MuiTableHead-root
  root: {
    backgroundColor: '#E2E2E2',
    borderRadius: '10px',
  },
});

In the component:

const tableHeaderClasses = useTableHeaderStyles();

...


  ...

user_1891712 · Answer

As far as I know, there are no ways to set border-radius for the entire tablerow, but the problem can be solved by using a separate radius for the first and last cells:

const { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, makeStyles } = MaterialUI

const useStyles = makeStyles((theme) => ({
  table: {
    minWidth: 400,
  },
  thead: {
    backgroundColor: 'lightgray',
    '& th:first-child': {
      borderRadius: '1em 0 0 1em'
    },
    '& th:last-child': {
      borderRadius: '0 1em 1em 0'
    }
  }
}))

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein }
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
]

const App = function () {
  const classes = useStyles()

  return (
    
      
          
            Dessert (100g serving)
            Calories
            Fat (g)
            Carbs (g)
            Protein (g)
          
        
          {rows.map((row) => (
            
              {row.name}
              {row.calories}
              {row.fat}
              {row.carbs}
              {row.protein}
            
          ))}
        
        
        
      
    
  )}

ReactDOM.render(, document.getElementById('root'))

How to give round corners to the TableHead of Material UI

2 Answers