In the documentation section about Overriding with Classes, you can learn how to customize the behavior of the TableCell's root class.
You can define your classes as mentioned in your question and then apply them to your component using the withStyles function:
import { withStyles } from 'material-ui/styles';
This is a concept known as a Higher Order Component (HOC), which takes a JSS object or a function that returns such an object, adds the styles to the document, and provides a classes prop to the wrapped component:
export default withStyles(styles)(MyComponent);
The classes prop contains an object that links the class names defined in your JSS to the actual class names in the document.
If you want to center the text within a TableCell, you need to override its root class. Define the JSS for this purpose and pass it to `withStyles` so that you have access to a classes prop:
const styles = theme => ({
centered: {
textAlign: 'center',
},
});
To override the root class when rendering your TableCell, specify a classes prop and provide an object with the overridden classes. In this case, we are focusing on altering the root class:
const SimpleTable = ({ classes }) =>
<Paper>
<Table>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell numeric>Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(n => {
return (
<TableRow key={n.id}>
<TableCell classes={{ root: classes.centered }}>{n.name}</TableCell>
<TableCell numeric>{n.protein}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>;
Any attributes specified in the class assigned to root will take precedence.
For a demonstration, check out this codesandbox with a functional example (including the complete code).