How do I add borderTop to React Material UI Table?

Question

What I want to do add top-border to above table.

I tried

const styles = theme => {
    root : { borderTopWidth: 1, borderColor: 'red'}
}

...

class TableComponent ...

{ classes } = this.props; 

<Table className={classes.root}>
</Table

export default withStyles(styles)(TableComponent)

I believe it's not a syntax problem, because other option like background: 'red' working properly. Perhaps I missed something. How can I implement topBorder to this table?

Answer 1

You forgot to define a borderStyle property

const styles = theme => {
    root : { borderTopWidth: 1, borderColor: 'red',borderStyle: 'solid'} // or borderTop: '1px solid red'
}

...

class TableComponent ...

{ classes } = this.props; 

<Table className={classes.root}>
</Table

export default withStyles(styles)(TableComponent)

or you can just add inline style like

<Table style={{borderTop: '1px solid red'}}>
</Table>