使用 makeStyles 创建的样式作为 Props 传递给 React 组件

本文旨在阐述如何将使用 makeStyles 函数创建的 Material-UI 样式作为 props 传递给 React 组件。通过理解 makeStyles 的返回值以及正确的使用方式，可以实现组件样式的灵活定制和复用。本文将提供示例代码和注意事项，帮助开发者更好地掌握这一技巧。

在 React 开发中，使用 Material-UI 的 makeStyles 函数可以方便地定义组件样式。然而，直接将 makeStyles 函数本身作为 props 传递是不正确的。实际上，应该传递的是 makeStyles 执行后返回的样式对象中的某个样式类名。

makeStyles 函数实际上是一个钩子（Hook），它接收一个样式定义函数作为参数，并返回一个钩子函数。调用这个钩子函数会返回一个对象，该对象包含了根据样式定义生成的 CSS 类名。因此，我们应该将这些类名作为 props 传递给子组件，并将其应用到相应的 HTML 元素上。

以下是一个示例，展示了如何正确地将使用 makeStyles 创建的样式作为 props 传递给子组件：

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

const useStyles = makeStyles((theme) => ({
  fieldShape: {
    marginTop: '16px',
    [theme.breakpoints.up('md')]: {
      width: '625px',
    },
  },
}));

function MyComponent(props) {
  const { styling } = props;
  return ; // 使用 className 而不是 style
}

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

  return ;
}

export default ParentComponent;

代码解释:

Open Voice OS

OpenVoiceOS是一个社区驱动的开源语音AI平台

下载

1. useStyles 定义： 使用 makeStyles 创建一个样式钩子，定义了一个名为 fieldShape 的样式类。
2. classes 获取： 在父组件 ParentComponent 中，调用 useStyles 钩子函数，获取包含样式类名的 classes 对象。
3. Props 传递： 将 classes.fieldShape (一个字符串，表示样式类名) 作为 styling prop 传递给子组件 MyComponent。
4. 样式应用： 在子组件 MyComponent 中，将接收到的 styling prop 作为 TextField 组件的 className 属性值。 注意这里使用的是 className 而不是 style。

关键点和注意事项:

• makeStyles 的返回值： makeStyles 返回的是一个钩子函数，调用该函数返回的是一个包含 CSS 类名的对象，而不是样式对象本身。
• 使用 className： 将样式类名作为 className 属性的值传递给 HTML 元素或 Material-UI 组件。 不要尝试将样式类名赋值给 style 属性，因为 style 属性期望的是一个 JavaScript 对象，而不是字符串。
• 样式优先级： 通过 makeStyles 创建的样式具有一定的优先级。如果需要覆盖这些样式，可以使用 Material-UI 提供的 styled API 或者使用 CSS 的 !important 声明。
• Theme 的使用： makeStyles 的样式定义函数可以接收一个 theme 参数，允许你访问 Material-UI 的主题配置，从而实现样式的动态定制。

总结：

正确地将 makeStyles 创建的样式作为 props 传递给子组件，需要理解 makeStyles 返回的是一个包含 CSS 类名的对象，并将这些类名作为 className 属性的值传递给相应的 HTML 元素。 遵循这些原则，可以更好地利用 Material-UI 的样式系统，构建可维护和可复用的 React 组件。