如何使用 Material-UI 中的 useTheme hook

Question

在

Material-UI网站上有一个使用useTheme钩子的例子：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;