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

Posted 2023-02-22

【中文标题】如何使用 Material-UI 中的 useTheme 钩子？

【英文标题】：How to use useTheme hook from Material-UI?

【发布时间】：2019-10-23 01:43:53

【问题描述】：

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;

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

【参考方案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;

【讨论】：

对我没用。带有代码的沙箱..请您帮忙分享一个工作示例。 codesandbox.io/s/material-demo-vmsp2?file=/demo.js