reactjs - 如何在 Material UI 中覆盖 .MuiTypography-body1 类

Question

我想覆盖默认值并将字体大小和系列(不使用内联)应用于抽屉中的列表元素。我不想创建新主题。我使用“useStyles”函数为其他属性执行此操作，但由于某种原因它对它们不起作用。如果我在浏览器开发工具中禁用它们，我的更改就会生效 - 知道如何在代码中做到这一点吗？

还有另一个类似的线程，但不幸的是解释对我没有帮助:overwrite the font size of this class .MuiTypography-body1

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex"
  },
  listItems: {
    margin: "7vh 0 7vh 0"
  },
  listText: {
    padding: "1vh 0 1vh 0",
    textAlign: "center",
    fontSize: "50px",
    fontFamily: "typeface-pacifico"
  }
}));

Answer 1

您必须创建一个 MuiTheme 才能覆盖 body1。

下面是您需要的代码。

// theme.js
import { createMuiTheme } from '@material-ui/core/styles'

const theme = createMuiTheme({
  typography: {
    body1: {
      fontFamily: "'Open Sans', sans-serif",
      fontWeight: 400,
      fontSize: 16,
      color: "red"
    }
  }
})

export default theme

然后让 ThemeProvider 组件像下面这样包装您的内容，

// example.js
import React from 'react'
import { ThemeProvider } from '@material-ui/styles'
import { makeStyles } from '@material-ui/core/styles';
import theme from 'theme.js'
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
  // Some extra styling if you'd like
  button: {
    margin: theme.spacing(1),
  },
}));


export default function Example() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme}>
      <Button className={classes.button}>I'm a button</Button>
    </ThemeProvider>
  )
}