How to increase the font size for the Table component

Question

I'm beginning to evaluate material-ui as an alternative for a project and I would like to know what is the recommended way to change the font size for a table.

Currently I'm playing with the component's sandbox (available at https://codesandbox.io/s/9onokxxn5w) but I couldn't find what to change in order to enlarge the font size.

I tried to change the theme in demo.js adding a fontSize key to the table element, as follows, but it didn't work:

const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,
        overflowX: 'auto',
    },
    table: {
        minWidth: 700,
        fontSize: '40pt'
    },
});

Thanks in advance for any help in figuring this out.

Answer 1

It seems that it does not work for Table but it works for the TabelRow or for the TableCell. Add a class to the TableRow element and set the fontSize param on it

...
<TableRow key={n.id} className={classes.tablecell}>
...

const styles = theme => ({
  tablecell: {
    fontSize: '40pt',
  },
});