reactjs - 如何在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';

高铁

const ThemedComponent = withTheme(Component)

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

现场演示