{"id":11736,"library":"react-jss","title":"React-JSS","description":"JSS is a CSS-in-JS library that allows developers to author styles using JavaScript. `react-jss` provides a robust integration layer for using JSS within React applications, leveraging hooks (like `createUseStyles`) and a `ThemeProvider` for contextual styling. It enables dynamic styling, global styles, and efficient style injection into the DOM. The current stable version is 10.10.0, though the project is explicitly stated as no longer maintained as of v10.10.1. This means new features, critical bug fixes, or compatibility updates for newer React versions (beyond what was already addressed) are not expected. Historically, it offered a performant and feature-rich alternative to other CSS-in-JS solutions, supporting various plugins for advanced styling patterns like nesting and global rules. Due to its abandonment, it is generally not recommended for new projects and existing projects should consider migration. Its release cadence was irregular towards its end, with several alpha and patch releases addressing React 18 compatibility and bug fixes.","status":"abandoned","version":"10.10.0","language":"javascript","source_language":"en","source_url":"https://github.com/cssinjs/jss","tags":["javascript","react","style","css","stylesheet","jss","hoc","decorator","typescript"],"install":[{"cmd":"npm install react-jss","lang":"bash","label":"npm"},{"cmd":"yarn add react-jss","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-jss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React component integration.","package":"react","optional":false}],"imports":[{"note":"This hook is the primary way to define and use styles in functional React components. CommonJS `require` syntax is not idiomatic for modern React applications and can lead to issues with tree-shaking and module resolution.","wrong":"const useStyles = require('react-jss').createUseStyles;","symbol":"createUseStyles","correct":"import { createUseStyles } from 'react-jss';"},{"note":"Used to provide a theme object down the React tree via context. Direct deep imports from `lib/` are discouraged as they are internal and subject to change.","wrong":"import ThemeProvider from 'react-jss/lib/ThemeProvider';","symbol":"ThemeProvider","correct":"import { ThemeProvider } from 'react-jss';"},{"note":"Provides a custom JSS instance, SheetsRegistry, or other JSS-specific configurations, particularly useful for Server-Side Rendering (SSR) or advanced setups.","symbol":"JssProvider","correct":"import { JssProvider } from 'react-jss';"}],"quickstart":{"code":"import React from 'react';\nimport { createUseStyles, ThemeProvider } from 'react-jss';\n\ninterface Theme {\n  primary: string;\n  secondary: string;\n  fontSize: number;\n}\n\nconst theme: Theme = {\n  primary: '#007bff',\n  secondary: '#6c757d',\n  fontSize: 16,\n};\n\nconst useStyles = createUseStyles<keyof Theme> ({\n  button: {\n    backgroundColor: ({ primary }) => primary,\n    color: 'white',\n    padding: '10px 20px',\n    border: 'none',\n    borderRadius: '5px',\n    fontSize: ({ fontSize }) => `${fontSize}px`,\n    cursor: 'pointer',\n    '&:hover': {\n      opacity: 0.9,\n    },\n  },\n  secondaryButton: {\n    backgroundColor: ({ secondary }) => secondary,\n    color: 'white',\n    padding: '10px 20px',\n    border: 'none',\n    borderRadius: '5px',\n    fontSize: ({ fontSize }) => `${fontSize}px`,\n    cursor: 'pointer',\n    marginLeft: '10px',\n    '&:hover': {\n      opacity: 0.9,\n    },\n  },\n});\n\nfunction MyButton() {\n  const classes = useStyles(theme); // styles can receive props or use the theme from context\n  return (\n    <div>\n      <button className={classes.button}>Primary Button</button>\n      <button className={classes.secondaryButton}>Secondary Button</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <ThemeProvider theme={theme}>\n      <MyButton />\n    </ThemeProvider>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates how to set up `react-jss` with a `ThemeProvider` to provide global theme values and use `createUseStyles` for component-scoped styling, including dynamic values based on the theme."},"warnings":[{"fix":"Evaluate migration to actively maintained CSS-in-JS libraries such as Emotion, Styled Components, or native CSS Modules, depending on project requirements and preferred styling paradigm.","message":"The `react-jss` project is officially no longer maintained. No new features, bug fixes, or compatibility updates for future React versions are expected. Users should consider migrating to alternative styling solutions.","severity":"breaking","affected_versions":">=10.10.1"},{"fix":"Ensure you are on `react-jss@10.9.2` or later for React 18 compatibility fixes related to `useInsertionEffect`. Be aware of the project's abandoned status for future React versions.","message":"There were several bug fixes and reverts related to React 18 compatibility, specifically concerning `useInsertionEffect`. While patched in v10.9.2, ensure thorough testing when using `react-jss` with React 18 or newer, as future React updates may reintroduce issues due to lack of maintenance.","severity":"gotcha","affected_versions":">=10.9.1-alpha.0 <10.9.2"},{"fix":"Upgrade to `react-jss@10.9.2` or later to include the most stable fixes for these memory leaks. For critical applications, monitor memory usage carefully, especially with highly dynamic or frequently updated styles.","message":"Memory leaks were reported and addressed in specific JSS plugins (e.g., `jss-plugin-global`, `jss-plugin-nested`, `jss-plugin-rule-value-function`) with subsequent reverts in some cases. This indicates potential instability around memory management in complex styling scenarios.","severity":"gotcha","affected_versions":">=10.8.1 <10.9.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `createUseStyles` is called directly inside a functional component's body or within a custom hook that respects React's Rules of Hooks.","cause":"`createUseStyles` is a React Hook and must be called within a functional component or another custom hook, not in a class component or outside React's render phase.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Wrap your component tree (or the relevant section) with `<ThemeProvider theme={yourThemeObject}>` to provide the theme context.","cause":"Attempting to access `theme` properties within a style definition or component without a `ThemeProvider` being present higher up in the component tree.","error":"TypeError: Cannot read properties of undefined (reading 'theme')"},{"fix":"Run `npm install react-jss` or `yarn add react-jss` to install the package. Verify the import statement is `import { ... } from 'react-jss';`.","cause":"The `react-jss` package is not installed or the import path is incorrect.","error":"Module not found: Can't resolve 'react-jss'"}],"ecosystem":"npm"}