如何在React组件中正确传递makeStyles生成的样式作为Prop

这种做法是错误的，因为TextField的style prop期望接收一个JavaScript对象，其中键是CSS属性名，值是对应的属性值（例如 { marginTop: ’16px’ }）。而我们传递的styling（即classes.fieldShape）是一个字符串，因此不会产生预期的样式效果。

正确的传递与应用方式

要正确地将makeStyles生成的样式传递给子组件，你需要将该类名字符串赋值给子组件的className prop。这样，浏览器会为该组件元素添加对应的CSS类，从而应用预定义的样式。

以下是修正后的示例代码：

// ParentComponent.js (父组件中)import React from 'react';import { makeStyles } from '@material-ui/core/styles';import MyComponent from './MyComponent'; // 导入子组件// 定义样式const useStyles = makeStyles((theme) => ({    fieldShape: {        marginTop: "16px",        [theme.breakpoints.up("md")]: {            width: "625px",        },        padding: '8px',        border: '1px solid blue',    },    anotherStyle: {        color: 'red',        fontSize: '1.2rem',    }}));function ParentComponent() {    const classes = useStyles(); // 获取类名对象    return (        
            
父组件
            {/* 将生成的类名字符串作为prop传递 */}                                    {/* 也可以直接传递多个类名，但通常建议合并或使用clsx库 */}                    
    );}export default ParentComponent;// MyComponent.js (子组件中)import React from 'react';import { TextField } from '@material-ui/core';function MyComponent(props) {    // 从props中解构出传递的类名    const { customClass } = props;    return (        // 正确用法：将类名字符串赋值给className prop        // TextField组件本身支持className prop来应用外部CSS类            );}export default MyComponent;

在这个修正后的例子中，ParentComponent通过customClass prop将classes.fieldShape这个类名字符串传递给MyComponent。在MyComponent内部，TextField组件通过className={customClass}正确地应用了这个CSS类，从而使样式生效。

注意事项

style vs. className： 这是一个核心区别。style prop用于设置元素的内联样式，它期望一个JavaScript对象，其键值对直接映射到CSS属性和值。而className prop则用于指定一个或多个CSS类名，这些类名会从样式表中查找并应用对应的CSS规则。makeStyles的优势： 使用makeStyles不仅能生成唯一的类名避免样式冲突，还能自动处理前缀、响应式断点（如示例中的theme.breakpoints.up(“md”)）以及与Material-UI主题的集成。直接使用内联样式则无法享受这些高级特性。合并类名： 如果需要为一个组件应用多个makeStyles生成的类名，或者需要合并外部类名和内部类名，可以使用模板字符串或更推荐的clsx库来合并它们。例如：className={clsx(classes.baseStyle, props.externalClass)}。组件库的兼容性： 大多数React组件库（包括Material-UI的组件）都支持通过className prop来扩展或覆盖其默认样式。因此，这种传递类名的方式是通用且推荐的。

总结

当使用Material-UI的makeStyles或useStyles来管理组件样式时，请牢记它们返回的是CSS类名字符串，而非内联样式对象。在将这些样式作为props传递给子组件时，务必使用className prop来接收和应用它们。遵循这一原则，将确保你的Material-UI样式能够正确地在组件之间传递和生效，同时充分利用JSS和Material-UI主题的强大功能。

以上就是如何在React组件中正确传递makeStyles生成的样式作为Prop的详细内容，更多请关注创想鸟其它相关文章！