如何在React类组件中使用react-jss？

Question

作者在react-jss documentation中写道： “从v10开始不支持基于HOC的API，并将在v11中将其删除。”

据我所知，这意味着injectSheet和withStyles之类的HOC功能在V11中将不再可用。

新的基于react的样式表生成函数似乎全部基于react钩子。函数createUseStyles对我自己和我的团队来说非常有希望，直到进一步研究源代码之前，我们意识到它仅在功能组件中可用，因为它使用了钩子。

问题

作为一个团队，我们仍然大量使用React Class组件，没有计划完全转向钩子，这不是因为钩子没有用，而是因为有时功能组件不是编写程序的最佳或最有组织的解决方案零件。

也许我错过了一些东西-但似乎除了基于核心js编写我们自己的手动实现之外，基于React Class的组件目前还没有解决方案。

为开发人员提供的解决方案可以以类似于createUseStyles的方式使用react-jss，与最新版本的react-jss保持一致，能够传递动态道具，并且等等，而无需编写手动实现？

Answer 1

尽管不是JSS特有的，但请记住，您始终可以使用一个小的包装器将任何Hook转换为渲染prop或HOC。

将挂钩转换为渲染道具的描述如下：https://reacttraining.com/blog/using-hooks-in-classes/

您可以使用类似的方法将任何Hook转换为HOC。

Answer 2

import { Classes } from 'jss';
import { createUseStyles } from 'react-jss';

首先，让我们创建一个类型更安全的函数来创建样式。

export function createStyles(classes: { [name: string]: Partial<CSSStyleDeclaration> }) {
    return createUseStyles(classes as any);
}

其次，我们将创建一个简单的包装器来为我们的组件提供钩子。

function Styles<T extends string | number | symbol>(props: { styles: () => Classes<T>, children: (classes: Classes<T>) => ReactElement }) {
    const classes = props.styles();
    return props.children(classes);
}

示例

const styles = createStyles({
    title: {
        fontSize: '25px',
        textTransform: 'uppercase'
    },
    message: {
        color: 'red'
    }
});

export const App = () => (
    <Styles styles={styles}>
        {classes => (
            <Fragment>
                <h1 className={classes.title}>Title</h1>
                <p className={classes.message}>message</p>
            </Fragment>
        )}
    </Styles>
);

输出