JSS

Description #

JSS is a CSS-in-JS library that allows developers to define styles in JavaScript objects and apply them dynamically to components, particularly in React-based applications.

History #

JSS was introduced by Oleg Isonen in 2014 to bring better maintainability and dynamic styling to web components. It became the foundation for Material-UI’s styling engine and inspired many modern CSS-in-JS tools.

Hello World Code #

import { createUseStyles } from 'react-jss'

const useStyles = createUseStyles({
  title: {
    color: 'hotpink',
  },
})

function App() {
  const classes = useStyles()
  return <h1 className={classes.title}>Hello, World!</h1>
}

How to Run #

Option 1: Online
Try it in CodeSandbox:
https://codesandbox.io/s/react-jss-starter-dv4lx

Option 2: Local
Install via npm:

npm install react-jss

Then use within a React project as shown above.

Key Concepts #

• CSS-in-JS via JavaScript object syntax
• Styles are scoped and dynamically injected
• Powerful theming support
• React-friendly with react-jss bindings
• Runtime style generation
• Style composition and inheritance
• Pseudo-classes and media queries supported
• Automatic vendor prefixing
• Can be server-side rendered
• Pluggable architecture via JSS plugins

Try It Online #

https://codesandbox.io/s/react-jss-starter-dv4lx

Fun Facts #

• JSS was one of the earliest CSS-in-JS libraries and inspired tools like Emotion and Styled Components.
• It powers the styling system of older versions of Material-UI (v4 and earlier).
• JSS allows for style logic like conditionals and loops directly in JavaScript.

Resources #

Official site
Docs or tutorial
GitHub or interpreter
Community or learning resources