材质ui useStyles真的需要整个道具对象吗



根据DOCS,如果我们希望我们的组件支持classes的样式重写,我们应该将整个props对象传递给useStyles挂钩:

function Nested(props) {
const classes = useStyles(props);
const { someProp1, someProp2, ...rest } = props;
return (...);
}

这迫使我们销毁组件主体内的道具,而不是组件签名内的道具。

经过一番短暂的讨论,我发现useStyles真正需要支持classes功能的是向它传递一个带有classes道具的对象:

function Nested({ someProp1, someProp2, classes ...rest }) {
const localClasses = useStyles({ classes });
return (...);
}

虽然这看起来很好,但我想知道我是否错过了什么。我不确定DOC是过于防御还是试图保持简洁,也许他们想避免我们重命名本地类变量,它可能只是说:";传递一个包含classes道具的对象"或者类似的东西。但也许还有更多,我错过了一些关键的东西。

makeStyles返回的useStyles()函数似乎只接受了一个可选对象(可能是props(。我没有深入研究,但乍一看,我没有看到任何期望,即你实际上传递了任何特定的对象/属性。

查看此处的源代码链接以了解更多信息

以下是的类型

import { ClassNameMap, Styles, WithStylesOptions } from '@material-ui/styles/withStyles';
import { DefaultTheme } from '../defaultTheme';
export default function makeStyles<
Theme = DefaultTheme,
Props extends object = {},
ClassKey extends string = string,
>(
styles: Styles<Theme, Props, ClassKey>,
options?: Omit<WithStylesOptions<Theme>, 'withTheme'>,
): keyof Props extends never
? // `makeStyles` where the passed `styles` do not depend on props
(props?: any) => ClassNameMap<ClassKey>
: // `makeStyles` where the passed `styles` do depend on props
(props: Props) => ClassNameMap<ClassKey>;

最新更新