在React组件中正确传递makeStyles生成的样式类名

理解makeStyles的返回值

makeStyles是Material-UI（或JSS）提供的一种CSS-in-JS解决方案，它允许开发者在JavaScript中定义CSS样式。当您使用makeStyles定义样式并调用其返回的Hook（例如useStyles()）时，该Hook并不会返回一个包含原始CSS属性和值的JavaScript对象。相反，它会生成一系列唯一的CSS类名，并将这些类名映射到您定义的样式规则上。

例如，如果您定义了以下样式：

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

当您在组件中调用const classes = useStyles();时，classes对象将包含一个名为fieldShape的属性，但它的值是一个字符串，代表着一个由JSS生成的唯一CSS类名（例如"makeStyles-fieldShape-123"），而不是原始的{ marginTop: "16px", ... }样式对象。

style与className属性的区别

在React中，组件的样式可以通过两种主要的属性来应用：

1. style属性： 期望接收一个JavaScript对象，该对象直接包含CSS属性（驼峰命名法）和对应的值。它用于应用行内样式（inline styles），这些样式直接写入到HTML元素的style属性中。

   <div style={{ backgroundColor: 'blue', padding: '10px' }}>
       这是一个蓝色背景的div
   </div>

   登录后复制

2. className属性： 期望接收一个字符串，该字符串包含一个或多个CSS类名（通过空格分隔）。它用于将元素与外部定义的CSS规则（例如，在CSS文件、CSS模块或CSS-in-JS库中定义的规则）关联起来。

   // 假设在某个地方定义了 .my-button 类
   <button className="my-button">
       点击我
   </button>

   登录后复制

正确传递makeStyles生成的类名

鉴于makeStyles返回的是类名字符串，当您想将这些样式应用到组件时，必须使用className属性。尝试将类名字符串传递给style属性是无效的，因为style属性期望的是一个样式对象，而不是类名字符串。

错误示例：

// 父组件
const classes = useStyles();
<MyComponent styling={classes.fieldShape}/>

// MyComponent
const { styling } = props;
// 错误！styling 是一个类名字符串，而不是样式对象
<TextField style={styling}/>

在上述错误示例中，styling变量的值实际上是"makeStyles-fieldShape-XYZ"这样的字符串，将其赋值给style属性会导致React无法解析，从而样式不生效。

Softr Studio

最简单的无代码web开发平台

55

查看详情

正确示例：

要正确传递和应用makeStyles生成的类名，您应该将类名作为className属性的值传递。

// ParentComponent.jsx
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import MyComponent from './MyComponent'; // 假设MyComponent是您自定义的组件

const useStyles = makeStyles((theme) => ({
    fieldShape: {
        marginTop: "16px",
        [theme.breakpoints.up("md")]: {
            width: "625px",
        },
    },
    // 可以定义更多样式
    anotherStyle: {
        padding: "8px",
        border: "1px solid blue",
    }
}));

function ParentComponent() {
    const classes = useStyles();
    return (
        <div>
            {/* 正确做法：将类名字符串通过一个自定义prop（例如componentClassName）传递 */}
            <MyComponent componentClassName={classes.fieldShape} />

            {/* 如果需要传递多个类名，可以使用模板字符串或第三方库如clsx */}
            <MyComponent componentClassName={`${classes.fieldShape} ${classes.anotherStyle}`} />
        </div>
    );
}

export default ParentComponent;

// MyComponent.jsx
import React from 'react';
import { TextField } from '@material-ui/core'; // 假设TextField是Material-UI组件

/**
 * MyComponent接收一个用于样式的类名字符串。
 * @param {object} props
 * @param {string} props.componentClassName - 要应用的CSS类名字符串。
 */
function MyComponent({ componentClassName }) {
    return (
        // 在内部组件上使用className属性来应用接收到的类名
        <TextField className={componentClassName} label="请输入文本" />
    );
}

export default MyComponent;

注意事项与最佳实践

1. 明确的Prop命名： 当您通过prop传递类名时，建议使用清晰的命名，如rootClassName、inputClassName、containerClassName等，以表明该prop期望的是一个CSS类名字符串。

2. 组合多个类名： 如果一个组件需要应用多个类名（例如，来自不同来源或基于条件），您可以使用JavaScript模板字符串或clsx这样的工具库来方便地组合它们。

   import clsx from 'clsx';
   
   // ...
   <TextField className={clsx(classes.fieldShape, {
   })} />

   登录后复制

3. 何时使用style属性： 只有当您需要应用非常动态的、一次性的、不适合作为可复用CSS规则的样式时，才考虑使用style属性。例如，根据JavaScript变量动态计算的定位或尺寸。

4. Material-UI的sx prop（MUI v5+）： 对于Material-UI v5及更高版本，sx prop提供了一种更灵活和强大的方式来定义样式，它既可以接受样式对象，也可以处理主题值，并在内部生成类名。在许多情况下，sx prop可以替代makeStyles和直接的行内style。

5. 主题和覆盖： 对于更复杂的样式定制和主题化，特别是对于Material-UI组件，建议利用其提供的主题（createTheme）和组件的overrides或components属性来统一管理样式，而不是过度依赖在每个组件中传递类名。

总结

正确理解makeStyles（或其他CSS-in-JS库）的返回值是使用React进行样式管理的关键。始终记住，makeStyles生成的是CSS类名字符串，因此它们应该通过className属性来应用。避免将类名字符串错误地传递给style属性，这将确保您的样式能够按预期生效，并保持代码的清晰和可维护性。

以上就是在React组件中正确传递makeStyles生成的样式类名的详细内容，更多请关注php中文网其它相关文章！