如何在 React js 中检查 material ui 主题的类型？ （浅色或深色）

Question

我想根据 material ui 主题的类型是浅色还是深色来创建某些条件 我该怎么做？

Answer 1

您需要重新创建主题并更新值 theme.palette.type（'light' 或 'dark'）并将其传递给 ThemeProvider 以应用更改。

const defaultTheme = createMuiTheme({
  palette: {
    type: "light"
  }
});

function App() {
  const [theme, setTheme] = React.useState(defaultTheme);
  const onClick = () => {
    const isDark = theme.palette.type === "dark";
    setTheme(
      createMuiTheme({
        palette: {
          type: isDark ? "light" : "dark"
        }
      })
    );
  };

  return (
    <ThemeProvider theme={theme}>
      <Card>
        <Typography variant="h3">{theme.palette.type}</Typography>
        <Button onClick={onClick}>Toggle theme</Button>
      </Card>
    </ThemeProvider>
  );
}

然后您可以使用 hook 或 HOC 检查子组件中的主题类型

挂钩

const isDarkTheme = useTheme().palette.type === 'dark';

HOC

const ThemedComponent = withTheme(Component)

render() {
  const isDarkTheme = this.props.theme.palette.type === 'dark';
  return (...)
}

现场演示