makeStyles（或类似CSS-in-JS方案）返回的是基于样式规则生成的CSS类名字符串集合，而非直接的CSS样式对象。在React组件中，应通过className属性来应用这些类名，而非style属性。混淆两者会导致样式不生效。本文将详细阐述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中，组件的样式可以通过两种主要的属性来应用：
style属性： 期望接收一个JavaScript对象，该对象直接包含CSS属性（驼峰命名法）和对应的值。它用于应用行内样式（inline styles），这些样式直接写入到HTML元素的style属性中。
这是一个蓝色背景的div
className属性： 期望接收一个字符串，该字符串包含一个或多个CSS类名（通过空格分隔）。它用于将元素与外部定义的CSS规则（例如，在CSS文件、CSS模块或CSS-in-JS库中定义的规则）关联起来。
// 假设在某个地方定义了 .my-button 类
正确传递makeStyles生成的类名
鉴于makeStyles返回的是类名字符串，当您想将这些样式应用到组件时，必须使用className属性。尝试将类名字符串传递给style属性是无效的，因为style属性期望的是一个样式对象，而不是类名字符串。
错误示例：
// 父组件const classes = useStyles();// MyComponentconst { styling } = props;// 错误！styling 是一个类名字符串，而不是样式对象
在上述错误示例中，styling变量的值实际上是”makeStyles-fieldShape-XYZ”这样的字符串，将其赋值给style属性会导致React无法解析，从而样式不生效。
正确示例：
要正确传递和应用makeStyles生成的类名，您应该将类名作为className属性的值传递。
// ParentComponent.jsximport 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 ( {/* 正确做法：将类名字符串通过一个自定义prop（例如componentClassName）传递 */} {/* 如果需要传递多个类名，可以使用模板字符串或第三方库如clsx */} );}export default ParentComponent;
// MyComponent.jsximport 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属性来应用接收到的类名 );}export default MyComponent;
注意事项与最佳实践
明确的Prop命名： 当您通过prop传递类名时，建议使用清晰的命名，如rootClassName、inputClassName、containerClassName等，以表明该prop期望的是一个CSS类名字符串。
组合多个类名： 如果一个组件需要应用多个类名（例如，来自不同来源或基于条件），您可以使用JavaScript模板字符串或clsx这样的工具库来方便地组合它们。
import clsx from 'clsx';// ...
何时使用style属性： 只有当您需要应用非常动态的、一次性的、不适合作为可复用CSS规则的样式时，才考虑使用style属性。例如，根据JavaScript变量动态计算的定位或尺寸。
Material-UI的sx prop（MUI v5+）： 对于Material-UI v5及更高版本，sx prop提供了一种更灵活和强大的方式来定义样式，它既可以接受样式对象，也可以处理主题值，并在内部生成类名。在许多情况下，sx prop可以替代makeStyles和直接的行内style。
主题和覆盖： 对于更复杂的样式定制和主题化，特别是对于Material-UI组件，建议利用其提供的主题（createTheme）和组件的overrides或components属性来统一管理样式，而不是过度依赖在每个组件中传递类名。
总结
正确理解makeStyles（或其他CSS-in-JS库）的返回值是使用React进行样式管理的关键。始终记住，makeStyles生成的是CSS类名字符串，因此它们应该通过className属性来应用。避免将类名字符串错误地传递给style属性，这将确保您的样式能够按预期生效，并保持代码的清晰和可维护性。
以上就是在React组件中正确传递makeStyles生成的样式类名的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1512877.html
微信扫一扫 
支付宝扫一扫 
