ReactJS: CSS in JS Dynamic Values/Theming Slows render

Question

I'm using CSS-in-JS (via JSS) in our application and we're having issues with render speeds when using dynamic values in our styles. I initially decided to use JSS because of the ability to pass in dynamic values into components via props and then into createUseStyles via the theme argument so we can customize component styles depending on it's implementation needs. But doing so really seems to hinder our time to render any component that is using any dynamic values. Here is a code example similar to what we're using to create dynamic styles of some divs.

export const dynamicDiv = ({minWidth, maxWidth, flex, align, children}) => {
    const classes = useStyles({minWidth, maxWidth, flex, align});

    return <div className={classes.dynamicClass}>
        {children}
    </div>
}

export const useStyles = createUseStyles({
    dynamicClass: {
        minHeight: '100%',
        display: 'flex',
        minWidth: ({minWidth = 0}) => minWidth,
        maxWidth: ({maxWidth = null}) => maxWidth,
        flex: ({flex = 1}) => flex,
        alignItems: ({align}) => {
            switch (align) {
                case 'center':
                    return 'center'
                case 'right':
                    return 'flex-end'
                default:
                    return 'flex-start'
            }
        },
        textAlign: ({align = 'left'}) => align
    }
})

This approach seems to create very slow render times (particularly in Chrome with developer tools open). Is there a better approach for handling dynamic values in JSS that doesn't create these performance bottlenecks?

I tried a couple different approaches to try to mitigate this issue.

First thing I tried was passing the dynamic values as arguments to the class itself as opposed to directly to each style definition:

export const dynamicDiv = ({minWidth, maxWidth, flex, align, children}) => {
    const classes = useStyles({minWidth, maxWidth, flex, align});

    return <div className={classes.dynamicClass}>
        {children}
    </div>
}

export const useStyles = createUseStyles({
    dynamicClass: ({minWidth, maxWidth, flex, align}) => ({
        minHeight: '100%',
        display: 'flex',
        minWidth: minWidth ? minWidth : 0,
        maxWidth: maxWidth ? maxWidth : null,
        flex: flex ? flex: 1,
        alignItems: () => {
            switch (align) {
                case 'center':
                    return 'center'
                case 'right':
                    return 'flex-end'
                default:
                    return 'flex-start'
            }
        },
        textAlign: align ? align : 'left'
    })
})

This approach seemed to improve things a liiiiiittle bit but didn't work as well as just avoiding passing the dynamic values into createUseStyles and just using the style property on the div to handle the variables:

export const dynamicDiv = ({minWidth, maxWidth, flex, align, children}) => {
    const classes = useStyles({minWidth, maxWidth, flex, align});

    const customStyles = {
        minWidth: minWidth ? minWidth : 0,
        maxWidth: maxWidth ? maxWidth : null,
        flex: flex ? flex: 1,
        alignItems: () => {
            switch (align) {
                case 'center':
                    return 'center'
                case 'right':
                    return 'flex-end'
                default:
                    return 'flex-start'
            }
        },
        textAlign: align ? align : 'left'
    }

    return <div className={classes.staticClass} style={customStyles}>
        {children}
    </div>
}

export const useStyles = createUseStyles({
    staticClass: {
        minHeight: '100%',
        display: 'flex'
    }
})

This approach is... fine... I guess, but I'd really rather not use inline style tags every time I want dynamic styles. It also kind of defeats the whole purpose and promise of using JSS in the first place.

Any guidance would be greatly appreciated. Thanks folks