React Hooks API

/**
 * Creates a React hook for using JSS styles with theme support
 * @param styles - JSS styles object or function that returns styles based on theme
 * @param options - Configuration options for the hook
 * @returns Hook function that returns CSS classes object
 */
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 for the stylesheet (useful for debugging) */
  name?: string;
  /** Index for controlling stylesheet insertion order */
  index?: number;
  /** Custom theming context */
  theming?: Theming<Theme>;
}

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

// Static styles
const useStyles = createUseStyles({
  container: {
    padding: '20px',
    backgroundColor: '#f5f5f5',
    borderRadius: '8px'
  },
  title: {
    fontSize: '24px',
    color: '#333',
    marginBottom: '16px'
  },
  button: {
    padding: '10px 20px',
    backgroundColor: '#007bff',
    color: 'white',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: '#0056b3'
    }
  }
});

function MyComponent() {
  const classes = useStyles();
  
  return (
    <div className={classes.container}>
      <h1 className={classes.title}>Hello World</h1>
      <button className={classes.button}>Click me</button>
    </div>
  );
}

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

const useStyles = createUseStyles({
  card: {
    padding: '16px',
    borderRadius: '8px',
    backgroundColor: (props) => props.variant === 'primary' ? '#007bff' : '#f8f9fa',
    color: (props) => props.variant === 'primary' ? 'white' : '#333',
    border: (props) => props.bordered ? '1px solid #dee2e6' : 'none',
    width: (props) => props.fullWidth ? '100%' : 'auto'
  },
  title: {
    fontSize: (props) => props.size === 'large' ? '24px' : '18px',
    fontWeight: (props) => props.bold ? 'bold' : 'normal',
    marginBottom: '12px'
  }
});

function Card({ variant = 'default', bordered = false, fullWidth = false, size = 'medium', bold = false, title, children }) {
  const classes = useStyles({ variant, bordered, fullWidth, size, bold });
  
  return (
    <div className={classes.card}>
      <h3 className={classes.title}>{title}</h3>
      {children}
    </div>
  );
}

// Usage
<Card variant="primary" bordered fullWidth size="large" bold title="My Card">
  Content here
</Card>

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

const useStyles = createUseStyles((theme) => ({
  container: {
    padding: theme.spacing.medium,
    backgroundColor: theme.colors.background,
    borderRadius: theme.borderRadius,
    boxShadow: theme.shadows.small
  },
  title: {
    fontSize: theme.typography.heading.fontSize,
    fontWeight: theme.typography.heading.fontWeight,
    color: theme.colors.primary,
    marginBottom: theme.spacing.small
  },
  text: {
    fontSize: theme.typography.body.fontSize,
    lineHeight: theme.typography.body.lineHeight,
    color: theme.colors.text
  }
}));

function ThemedComponent({ title, children }) {
  const classes = useStyles();
  
  return (
    <div className={classes.container}>
      <h2 className={classes.title}>{title}</h2>
      <p className={classes.text}>{children}</p>
    </div>
  );
}

// Theme definition
const theme = {
  colors: {
    primary: '#007bff',
    background: '#f8f9fa',
    text: '#333'
  },
  typography: {
    heading: {
      fontSize: '24px',
      fontWeight: 600
    },
    body: {
      fontSize: '16px',
      lineHeight: 1.5
    }
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px'
  },
  borderRadius: '8px',
  shadows: {
    small: '0 2px 4px rgba(0,0,0,0.1)'
  }
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ThemedComponent title="Themed Component">
        This component uses theme values for styling.
      </ThemedComponent>
    </ThemeProvider>
  );
}

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

// Create custom theming
const { ThemeProvider, useTheme } = createTheming({
  primaryColor: '#ff6b6b',
  secondaryColor: '#4ecdc4'
});

const useStyles = createUseStyles(
  (theme) => ({
    button: {
      backgroundColor: theme.primaryColor,
      color: 'white',
      padding: '10px 20px',
      border: 'none',
      borderRadius: '4px',
      '&:hover': {
        backgroundColor: theme.secondaryColor
      }
    }
  }),
  { theming: { context: ThemeProvider.context } }
);

function CustomThemedButton({ children }) {
  const classes = useStyles();
  
  return (
    <button className={classes.button}>
      {children}
    </button>
  );
}

const useStyles = createUseStyles(
  {
    component: {
      padding: '16px',
      backgroundColor: '#f5f5f5'
    }
  },
  {
    name: 'MyComponent', // For debugging
    index: 1000, // Control CSS insertion order
    theming: customTheming // Use custom theming context
  }
);

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

const useStyles = createUseStyles({
  container: {
    padding: '20px',
    borderRadius: '8px'
  }
});

function MyComponent() {
  const classes = useStyles();
  const theme = useTheme();
  
  return (
    <div 
      className={classes.container}
      style={{ 
        backgroundColor: theme.backgroundColor,
        color: theme.textColor 
      }}
    >
      Content with theme colors
    </div>
  );
}

type Classes<T extends string | number | symbol> = Record<T, string>;

interface BaseOptions<Theme = DefaultTheme> extends StyleSheetFactoryOptions {
  /** Index for controlling stylesheet insertion order */
  index?: number;
  /** Custom theming context */
  theming?: Theming<Theme>;
}