TableHeader of Material UI does not make the content bold

user_12212617 0
Viewed 3014

I am using Material UI to create a table. The documentation shows that the TableHeader component should make the text inside itself bold, but this is not happening in my project. I did not apply any style myself and I did not override the default Material UI theme. I just copied this code inside my project but I can't see the bold header. I don't even know how to debug this, the style is applied in the browser, I checked with the inspector, but it does nothing to the displayed text. What could I do?

material-ui reactjs
2 Answers

I actually figured out. I just had to import all the variants of the font I was using (Roboto in my case) from Google Fonts.

user_122126170

Investigate the default library style

One way is to console the theme like:

const useStyles = makeStyles((theme) => {
  console.log(theme);
  return {
    ...
  };
});

Second way is to check by incpect the element with the dev tools and check for the default styles

Third way is to go and see where it's define in the library:

Here we can see that the fontWeight of TableCell head is "fontWeightMedium"

enter image description here

And here we see what the value of "fontWeightMedium"

enter image description here

(Old answer) How to override the styles:

In your codesandbox the default font-weight is 500. and you can override it like this:

https://codesandbox.io/s/silly-driscoll-n9yyw

I add this override:

const useStyles = makeStyles({
  table: {
    minWidth: 650,
    "& .MuiTableCell-head": {
      fontWeight: 700
    }
  }
});

In material ui a better way is to update all the overrides in one place - theme:

import React from 'react';
import { ThemeProvider, createTheme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const theme = createTheme({
  overrides: {
    MuiButton: {
      root: {
        fontSize: '1rem',
      },
    },
  },
});

export default function GlobalThemeOverride() {
  return (
    <ThemeProvider theme={theme}>
      <Button>font-size: 1rem</Button>
    </ThemeProvider>
  );
}

(https://material-ui.com/customization/components/)

user_108699290
Related