Question

我没有找到有关如何在material-ui中使用makeStyles（）重用类的单个示例。

说我有一个叫做“可调整大小”或“浮动”的类

我必须在每个共享特定类的组件内定义makeStyles（）并复制代码。

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

也许应该使用上下文提供者来共享样式？但这不是useTheme（）的意义所在吗？我不明白为什么。

有人对Material-ui有经验吗？

Answer 1

useTheme是一个材质用户界面挂钩，仅用于处理材质用户界面主题。
我正在使用这个UI库几个月，而且我也遇到了同样的问题。

为了解决这种情况，请创建您自己的自定义钩子，该钩子将返回classNames。

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

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

现在导入此globalUseStyles钩子，并使用如下所示的className：-

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>
  );
}

这是有效的沙箱链接：-https://codesandbox.io/s/nervous-water-miu0y

Answer 2

您需要使用 Material UI 的 <CSSBaseLine/> 组件为您的应用创建全局 CSS 样式。根据文档，按如下方式包装您的组件

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

然后使用 createMuiTheme 钩子可以通过以下代码创建全局样式

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

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

使自定义类可全局用于material-ui

2 个答案: