or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

hooks.mdindex.mdjsx.mdproviders.mdstyled.mdtheming.mdwithstyles.md
tile.json

tessl/npm-react-jss

JSS integration with React providing CSS-in-JS styling solutions with theming support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-jss@10.10.x

To install, run

npx @tessl/cli install tessl/npm-react-jss@10.10.0

index.mddocs/

React JSS

React JSS provides seamless React integration for JSS (JavaScript Style Sheets), enabling developers to write CSS-in-JS styles with dynamic theming capabilities and React-specific optimizations. It offers multiple styling approaches including Higher-Order Components, React Hooks, styled components, and JSX factories, all supporting theme injection and dynamic style generation.

Package Information

  • Package Name: react-jss
  • Package Type: npm
  • Language: JavaScript with TypeScript definitions
  • Installation: npm install react-jss

Core Imports

import { withStyles, createUseStyles, JssProvider, ThemeProvider } from 'react-jss';

For CommonJS:

const { withStyles, createUseStyles, JssProvider, ThemeProvider } = require('react-jss');

Basic Usage

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

// Define styles
const useStyles = createUseStyles({
  container: {
    padding: '20px',
    backgroundColor: '#f5f5f5',
    borderRadius: '8px'
  },
  title: {
    fontSize: '24px',
    color: (props) => props.theme.primaryColor || '#333',
    marginBottom: '16px'
  }
});

// Use in component
function MyComponent(props) {
  const classes = useStyles(props);
  return (
    <div className={classes.container}>
      <h1 className={classes.title}>Hello World</h1>
    </div>
  );
}

Architecture

React JSS is built around several key architectural components:

  • Multiple Styling APIs: Four distinct approaches (withStyles HOC, createUseStyles hooks, styled components, jsx factory) for different use cases and preferences
  • Theme System: Comprehensive theming support with providers, context, and injection capabilities
  • JSS Integration: Built on top of JSS core with default preset plugins for vendor prefixing, nesting, and other CSS features
  • Provider System: JssProvider for configuration management and stylesheet registry control
  • Context Architecture: JssContext for sharing JSS instances and configuration across component trees
  • Server-Side Rendering: Full SSR support with registry management and style extraction capabilities
  • Dynamic Styles: Support for function-based styles that respond to props and theme changes
  • Performance Optimizations: Sheet caching, reference counting, and React optimization patterns

Capabilities

Higher-Order Component API

Classic React pattern for injecting styles into components as a classes prop. Ideal for class components and when following traditional HOC patterns.

function withStyles<ClassNames extends string | number | symbol, Props, Theme>(
  styles: Styles<ClassNames, Props, Theme> | ((theme: Theme) => Styles<ClassNames, Props, undefined>),
  options?: WithStylesOptions
): <C>(comp: C) => ComponentType<
  JSX.LibraryManagedAttributes<
    C,
    Omit<GetProps<C>, 'classes'> & {
      classes?: Partial<ClassesForStyles<typeof styles>>;
      innerRef?: RefObject<any> | ((instance: any) => void);
    }
  >
>;

interface WithStylesOptions extends BaseOptions {
  injectTheme?: boolean;
  jss?: Jss;
}

Higher-Order Component API

React Hooks API

Modern React hooks approach for using JSS styles. Perfect for functional components and when you need fine-grained control over style lifecycle.

function createUseStyles<C extends string = string, Props = unknown, Theme = DefaultTheme>(
  styles: Styles<C, Props, Theme> | ((theme: Theme) => Styles<C, Props, undefined>),
  options?: CreateUseStylesOptions<Theme>
): (data?: Props & {theme?: Theme}) => Classes<C>;

interface CreateUseStylesOptions<Theme = DefaultTheme> extends BaseOptions<Theme> {
  name?: string;
}

React Hooks API

Styled Components API

Styled-components-like API for creating styled React components. Best for component libraries and when you prefer component-based styling approaches.

function styled(
  tagOrComponent: string | ComponentType<any>,
  options?: StyledOptions
): (...styles: Array<CSSObject | ((props: any) => CSSObject)>) => ComponentType<any>;

interface StyledOptions extends BaseOptions {
  shouldForwardProp?: (prop: string) => boolean;
}

Styled Components API

JSX Factory

Custom JSX factory that supports inline CSS via css prop. Useful for quick styling and prototyping without defining separate style objects.

function jsx(type: any, props: any, ...children: any[]): ReactElement;
function createJsx(css?: CSSProcessor): typeof jsx;

interface CSSProcessor {
  (styles: CSSObject): string;
}

JSX Factory

Theme System

Comprehensive theming capabilities with providers, context access, and theme injection. Essential for applications requiring consistent design systems and theme switching.

const ThemeProvider: ComponentType<{theme: any; children: ReactNode}>;
function useTheme<T = DefaultTheme>(): T;
function withTheme<P>(component: ComponentType<P>): ComponentType<P & {theme: any}>;
function createTheming<T>(defaultTheme?: T): Theming<T>;

interface Theming<Theme> {
  context: Context<Theme>;
  withTheme: (component: ComponentType<any>) => ComponentType<any>;
  useTheme: () => Theme;
  ThemeProvider: ComponentType<{theme: Theme; children: ReactNode}>;
}

Theme System

Provider and Context System

JSS configuration management and context system for sharing JSS instances, registries, and settings across your application component tree.

const JssProvider: ComponentType<{
  jss?: Jss;
  registry?: SheetsRegistry;
  generateId?: GenerateId;
  classNamePrefix?: string;
  disableStylesGeneration?: boolean;
  children: ReactNode;
  id?: CreateGenerateIdOptions;
  isSSR?: boolean;
}>;

const JssContext: Context<JssContextValue>;

interface JssContextValue {
  jss?: Jss;
  registry?: SheetsRegistry;
  managers?: Managers;
  sheetOptions: StyleSheetFactoryOptions;
  disableStylesGeneration: boolean;
  isSSR: boolean;
}

Provider and Context System

Core Types

interface WithStylesProps<S extends Styles<any, any, any> | ((theme: any) => Styles<any, any, undefined>)> {
  classes: ClassesForStyles<S>;
}

type ClassesForStyles<S extends Styles<any, any, any> | ((theme: any) => Styles<any, any, undefined>)> = 
  Classes<S extends (theme: any) => Styles<any, any, undefined> ? keyof ReturnType<S> : keyof S>;

interface BaseOptions<Theme = DefaultTheme> extends StyleSheetFactoryOptions {
  index?: number;
  theming?: Theming<Theme>;
}

type DefaultTheme = Jss.Theme;

type GetProps<C> = C extends ComponentType<infer P> ? P : never;

interface StyledOptions extends BaseOptions {
  shouldForwardProp?: (prop: string) => boolean;
}

interface CSSProcessor {
  (styles: CSSObject): string;
}

interface CSSObject {
  [key: string]: any;
}

declare global {
  namespace Jss {
    /** You can use the global Jss.Theme interface to define a project-wide default theme. */
    export interface Theme {}
  }
}

All Exports

// Main styling APIs
function withStyles<ClassNames extends string | number | symbol, Props, Theme>(
  styles: Styles<ClassNames, Props, Theme> | ((theme: Theme) => Styles<ClassNames, Props, undefined>),
  options?: WithStylesOptions
): <C>(comp: C) => ComponentType<
  JSX.LibraryManagedAttributes<
    C,
    Omit<GetProps<C>, 'classes'> & {
      classes?: Partial<ClassesForStyles<typeof styles>>;
      innerRef?: RefObject<any> | ((instance: any) => void);
    }
  >
>;

function createUseStyles<C extends string = string, Props = unknown, Theme = DefaultTheme>(
  styles: Styles<C, Props, Theme> | ((theme: Theme) => Styles<C, Props, undefined>),
  options?: CreateUseStylesOptions<Theme>
): (data?: Props & {theme?: Theme}) => Classes<C>;

function styled(
  tagOrComponent: string | ComponentType<any>,
  options?: StyledOptions
): (...styles: Array<CSSObject | ((props: any) => CSSObject)>) => ComponentType<any>;

function jsx(type: any, props: any, ...children: any[]): ReactElement;
function createJsx(css?: CSSProcessor): typeof jsx;

// Provider and context
const JssProvider: ComponentType<{
  jss?: Jss;
  registry?: SheetsRegistry;
  generateId?: GenerateId;
  classNamePrefix?: string;
  disableStylesGeneration?: boolean;
  children: ReactNode;
  id?: CreateGenerateIdOptions;
  isSSR?: boolean;
}>;

const JssContext: Context<JssContextValue>;

// Re-exported from JSS core
const jss: Jss;
const SheetsRegistry: typeof JSSSheetsRegistry;
const createGenerateId: CreateGenerateId;

// Re-exported from theming package  
const ThemeProvider: ComponentType<{theme: any; children: ReactNode}>;
const useTheme: <T = DefaultTheme>() => T;
const withTheme: <P>(component: ComponentType<P>) => ComponentType<P & {theme: any}>;
const createTheming: <T>(defaultTheme?: T) => Theming<T>;

// Default export
export default withStyles;