How to use react-jss within react class Components?

Question

In react-jss documentation, the authors have written: 'HOC based API is deprecated as of v10 and will be removed in v11.'

This means, as far as I understand, that such HOC functionality as injectSheet and withStyles will no longer be available in V11.

The new react-based stylesheet generating functions seem to be all based on react hooks. The function createUseStyles seemed very promising to myself and my team, until upon looking further into the source code we realised that it was only available within functional components, as it makes use of hooks.

The Problem

As a team we still make heavy use of React Class components and have no plans to move completely to hooks, not because hooks aren't useful, but because sometimes functional components aren't the best or most organised solution to writing a component.

Perhaps I'm missing something-- but it seems like there is now no solution left for React Class based components, other than writing our own manual implementation from core jss.

What solutions are there for a developer to make use of react-jss in a way similar to that achieved by createUseStyles, keeping up with the latest version of react-jss, being able to pass dynamic props, and etc. without writing a manual implementation?

Grivation

Answer 1

While not specific to JSS, keep in mind that you can always use a tiny wrapper to convert any Hook to render prop or a HOC.

Converting Hook to a render prop is described here: https://reacttraining.com/blog/using-hooks-in-classes/

You can use a similar approach to convert any Hook to a HOC.

Instrumentation

Thanks for this suggestion, Dan. I was simply ignorant of the ability to, in a sense, render a child component in the render method of a class, but gain access to this child's render method and still make use of hooks. For us this is will work without any issues. I made a demo of it just to test the concept: repl.it/@EvanGarrett/React-Jss-ClassComponents – Grivation

Answer 2

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

First, lets create a more type safe function for creating styles.

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

Secondly, we'll create a simple wrapper to allow hooks for our components.

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

Example

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>
);

Output

Chaudfroid