如何使用 Material-UI 中的 useTheme 钩子？

Question

Material-UI网站上有一个useTheme hook的使用示例：https://material-ui.com/styles/advanced/#theming

这里的代码：

    import React from 'react';
    import { ThemeProvider, useTheme } from '@material-ui/styles';

    function DeepChild() {
      const theme = useTheme();

      return <span>{`spacing ${theme.spacing}`}</span>;
    }

    function UseTheme() {
      return (
        <ThemeProvider
          theme={{
            spacing: '8px',
          }}
        >
          <DeepChild />
        </ThemeProvider>
      );
    }

    export default UseTheme;

但它没有显示如何注入主题。当我尝试使用 className 注入一些属性时，它什么也没做。代码在这里：

import React from "react";
import { ThemeProvider, useTheme } from "@material-ui/styles";

function DeepChild() {
  const theme = useTheme();

  return <div className={theme}> eldfo elo </div>;
}

function App() {
  return (
    <ThemeProvider
      theme={{
        spacing: "40px",
        color: "yellow",
        fontSize: "30px"
      }}
    >
      <DeepChild />
    </ThemeProvider>
  );
}

export default App;

我的问题是如何正确注入？

Answer 1

像使用任何其他 React 钩子一样使用它：

function App() {
  const theme = useTheme<Theme>()
  const space = theme.spacing(1)
  return <p>Space: {space}</p>
}

请注意，您得到的是完整的主题。如果您想获取任何类名，您应该使用theme.className，但您没有在主题示例中定义className 属性。

你想做的大概是：

import React from "react";
import { ThemeProvider, useTheme } from "@material-ui/styles";

function DeepChild() {
  const theme = useTheme();

  return <div className={theme.divClass}> eldfo elo </div>;
}

function App() {
  return (
    <ThemeProvider
      theme={{
        divClass: {
          spacing: "40px",
          color: "yellow",
          fontSize: "30px"
        }
      }}
    >
      <DeepChild />
    </ThemeProvider>
  );
}

export default App;