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钩子一样使用它：

class Thing extends AbstractThing {
  commands: IPlan[] = [
    {
      plan: 10
    }
  ]
}

请注意，您获得的是完整主题。如果要获取任何类名，则应使用function App() { const theme = useTheme<Theme>() const space = theme.spacing(1) return <p>Space: {space}</p> }，但在主题示例中未定义theme.className属性。

您可能想做的是：

className

如何使用Material-UI的useTheme挂钩？

1 个答案: