CODEWITHSUNDEEP
reactjsmaterial-ui
dj48
dj48

Reputation: 23

Sharp corners in Table in Material UI

The tables in Material-ui by default have rounded corners. I want them to have sharp corners.

Upon looking at some examples at material-ui.com/components/tables/, it seems that tables use paper for their styling. Paper is rounded by default but we can use the square property to make its boundary sharp. I don't know how I can achieve this with Tables.

I think that using

<TableContainer component={Paper}>

in some way will lead to the solution but I am unable to find it.

How can I make the corners sharp?

Thanks

Upvotes: 0

Views: 2856

Answers (2)

sjsouvik
sjsouvik

Reputation: 153

Apply style={{ borderRadius: 0 }} on TableCell of TableHead component.

Upvotes: 0

Yatrix
Yatrix

Reputation: 13795

You have to override the style like so, <TableContainer className={classes.container} />. The container class has to have borderRadius: 0 in it.

Upvotes: 1

Related Questions