Reactjs 使自定义类全局可用于材质ui

在MaterialUI中，我没有找到一个关于如何使用

makeStyles（）

重用类的示例

假设我有一个名为

resizeable

或

floating

我必须在每个共享特定类的组件中定义

makeStyles（）

，并复制代码

主题化功能不提供任何选项来执行此操作。 所有主题示例都展示了如何使用现有的api道具

也许应该使用上下文提供程序来共享样式？ 但是，

useTheme（）

的重点不正是这个吗？我不明白为什么

---

任何有过material ui经验的人？

useTheme

都是material ui挂钩，只用于处理material ui主题
我使用这个UI库有几个月了，我也遇到了同样的问题

要处理这种情况，请创建自己的自定义钩子，该钩子返回类名。

例如，这里有一个自定义样式挂钩，其中包含所需的所有全局类名：-

import { makeStyles } from '@material-ui/core/styles';

const globalUseStyles = makeStyles((theme) => ({
  redButton:{
    color:'red',
    background:'#fff',
    border:'1px solid red',
    '&:hover':{
      background:'red',
      color:'#fff'
    }
  },
  greentButton:{
    color:'green',
    background:'#fff',
    border:'1px solid green',
    '&:hover':{
      background:'green',
      color:'#fff'
    }
  }
}));

export default globalUseStyles

现在导入这个

globalUserStyles

hook并使用它的类名，如下所示：-

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import globalUseStyles from './styleHooks';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
  },
  
}));

export default function ContainedButtons() {
  const classes = useStyles();
  const globalClasses = globalUseStyles()

  return (
    <div className={classes.root}>
      <Button className={globalClasses.greentButton} variant="contained">Green Button</Button>
      <Button className={globalClasses.redButton} variant="contained">
        Red Button
      </Button>
      <Button className={globalClasses.greentButton}>
        Green Button
      </Button>
      <Button variant="contained" color="primary">
        Default
      </Button>
    </div>
  );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Button”导入按钮；
从“./styleHooks”导入GlobalUserStyles；
const useStyles=makeStyles（（主题）=>({
根目录：{
'& > *': {
边距：主题。间距（1），
},
},
}));
导出包含按钮的默认函数（）{
const classes=useStyles（）；
常量globalClasses=globalUserStyles（）
返回(
绿色按钮
红色按钮
绿色按钮
违约
);
}

---

这里是工作沙盒链接：-

您需要使用Material UI的

组件为您的应用程序创建全局CSS样式。根据文档，按如下方式包装组件

<ThemeProvider theme={theme}>
<CSSBaseLine/>
{children}
<ThemeProvider />

 import { createMuiTheme } from "@material-ui/core";
const theme = createMuiTheme({
  

  overrides: {
    MuiCssBaseline: {
      "@global": {
        ".subtitle": {
          color: "white",
          fontWeight: "bold",
          textTransform: "uppercase",
        },
      },
    },
  },
});