主题：使用 makeStyles 创建主题

介绍

在 React 中，我们可以使用 makeStyles 函数来创建主题样式。这个函数可以让我们使用类似 CSS 的方式去定义样式，并且可以方便地访问主题属性。

安装

在使用 makeStyles 之前，我们需要安装 @material-ui/core 包。

npm install @material-ui/core

使用

要使用 makeStyles，我们首先需要 import 它：

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

然后，我们可以调用该函数并传入一个函数作为参数，该函数可以返回一个对象，该对象包含我们定义的样式。下面是一个示例：

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.background.default,
    color: 'white',
    padding: theme.spacing(2),
    [theme.breakpoints.down('sm')]: {
      padding: theme.spacing(1),
    },
  },
}));

在上面的示例中，我们创建了一个名为 root 的样式，并使用了从主题中获取的背景颜色、间距和断点。

要使用这个样式，我们可以使用 useStyles 函数：

const classes = useStyles();

return <div className={classes.root}>Hello World!</div>;

这里的 classes.root 将应用上面定义的样式。同时，我们还可以使用主题对象中定义的任何其他属性来创建样式。

示例

下面是一个完整的示例，演示如何使用 makeStyles 和主题来创建样式：

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

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: 'white',
    padding: theme.spacing(2),
    [theme.breakpoints.down('sm')]: {
      padding: theme.spacing(1),
    },
  },
  button: {
    backgroundColor: theme.palette.secondary.main,
    color: 'white',
  },
}));

function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <h1>Hello World!</h1>
      <Button className={classes.button}>Click Me!</Button>
    </div>
  );
}

export default App;

注意，我们同时使用了 primary 和 secondary 主题属性来定义颜色。这个例子在桌面和移动设备上都可以正常使用。

结论

使用 makeStyles 可以让我们轻松地使用主题来创建样式。这种方法可以使我们的代码更加模块化，并且可以将样式和主题更好地组织起来。