资料用户界面的TableHeader不使内容粗体。

Question

我正在使用Material创建一个表。文档显示，TableHeader组件应该使文本本身变得粗体，但在我的项目中没有发生这种情况。我本人没有应用任何样式，也没有覆盖默认的资料UI主题。我只是在我的项目中复制了这段代码，但是我看不到粗体的标题。我甚至不知道如何调试它，样式在浏览器中应用，我与检查器进行了检查，但它对显示的文本没有任何作用。我能做什么？

Answer 1

我真的想通了。我只需要从Google字体中导入我使用的字体的所有变体(在我的例子中是Roboto)。

Answer 2

调查默认的库样式

一种方法是安慰主题如下：

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

第二种方法是使用dev工具包括元素并检查默认样式。

第三种方法是查看它在库中的定义：

在这里我们可以看到fontWeight of TableCell head是"fontWeightMedium“

​

​

在这里我们看到了"fontWeightMedium“的价值

​

​

(旧答案)如何覆盖样式：

在您的代码框中，默认的字体重量是500。你可以这样覆盖它：

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

我添加此覆盖：

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

在material中，一个更好的方法是在一个地方更新所有重写-主题：

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/)