Mui材料断点错误主题找不到

Question

嗨，我尝试放置我的代码断点，但在输出中显示错误

import { makeStyles } from "@material-ui/styles";

const useStyle = makeStyles((theme)=>({
  LogoLg:{
    display:'none',
    [theme.breakpoints.up('sm')]:{
      display:'block'
    }
  }
}))

export default useStyle;

Answer 1

在以下压力测试中，您可以实时更新主题颜色和背景颜色属性：

const useStyles = makeStyles((theme) => ({
  root: (props) => ({
    backgroundColor: props.backgroundColor,
    color: theme.color,
  }),
}));

使用主题上下文

从 v5 开始，MUI 不再使用 JSS 作为其默认样式解决方案。 如果您仍想使用@mui/styles 导出的实用程序并且它们依赖于主题，则需要提供主题作为上下文的一部分。 为此，您可以使用 @mui/styles 中提供的 ThemeProvider 组件，或者，如果您已经在使用 @mui/material，则应该使用从 @mui/material/styles 导出的那个，以便相同的主题可用于组件来自“@mui/material”。

import { makeStyles } from '@mui/styles';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme();

const useStyles = makeStyles((theme) => ({
  root: {
    color: theme.palette.primary.main,
  }
}));

const App = (props) => {
  const classes = useStyles();
  return <ThemeProvider theme={theme}><div {...props} className={classes.root}></ThemeProvider>;
}