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

Question

在react-jss documentation中，作者写道： 'HOC based API is deprecated as of v10 and will be removed in v11.'

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

新的基于react的样式表生成函数好像都是基于react hooks的。函数 createUseStyles 对我和我的团队来说似乎很有前途，直到进一步查看源代码后我们才意识到它仅在功能组件中可用，因为它使用了钩子。

问题

作为一个团队，我们仍然大量使用 React Class 组件并且没有计划完全转向 hooks，不是因为 hooks 没有用，而是因为有时功能组件不是最好的或编写组件的最有条理的解决方案。

也许我遗漏了一些东西——但似乎现在没有针对基于 React Class 的组件的解决方案，除了从核心 jss 编写我们自己的手动实现。

有哪些解决方案可以让开发人员以类似于 createUseStyles 的方式使用 react-jss，跟上最新版本的 react-jss，能够传递动态道具, 等等，而无需编写手动实现？

Answer 1

虽然不是特定于 JSS，但请记住，您始终可以使用一个小包装器将任何 Hook 转换为呈现 prop 或 HOC。

这里描述了将 Hook 转换为渲染道具：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>
);

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

How to use react-jss within react class Components?

css

reactjs

jss

例子

输出