SSR support, CSS extraction and developer tools
import { makeStyles } from '@griffel/react';
const useClasses = makeStyles({
icon: { color: 'red', paddingLeft: '5px' },
});
function Component() {
const classes = useClasses();
return <span className={classes.icon} />;
}
By default, Griffel is a runtime CSS-in-JS engine, you can simply install and use it in code directly.
Griffel provides first class support for Server-Side Rendering and supports all tooling required for Next.js.
Griffel only does the expensive runtime on the first render of the component. This work can be further optimized at build time by pre-computing and transforming styles.
While ahead-of-time compilation allows performs optimization to reduce runtime work, the goal of CSS extraction is to remove runtime insertion to DOM and produce CSS stylesheets.