Skip to main content

makeResetStyles

Atomic CSS has tradeoffs. Browser layout can slow down proportionally to the number of HTML class names that reference different rules.

There are cases when it's reasonable to flatten multiple declarations into monolithic CSS. For example, base styles for components in a UI library. Rules generated by makeResetStyles() are inserted into the CSS style sheet before all the Atomic CSS, so styles from makeStyles() will always override these rules.

makeResetStyles returns a React hook that should be called inside a component:

import { makeResetStyles } from '@griffel/react';

const useClass = makeResetStyles({
color: 'blue',
margin: 0,
':hover': { color: 'teal' },
});
Produces following CSS...
.r6gaeno {
color: blue;
margin: 0px;
}

.r6gaeno:hover {
color: teal;
}

Usage with makeStylesโ€‹

import { makeStyles, makeResetStyles } from '@griffel/react';
import { mergeClasses } from './mergeClasses';

const useBaseClass = makeResetStyles({
color: 'red',
padding: 0,
// etc.
});

const useClasses = makeStyles({
primary: { color: 'blue' },
circular: {
padding: '5px',
borderRadius: '5px',
},
});

function Component(props) {
const baseClass = useBaseClass();
const classes = useClasses();

return (
<button className={mergeClasses(baseClass, props.primary && classes.primary, props.circular && classes.circular)} />
);
}

Features supportโ€‹

makeResetStyles supports the same features as makeStyles() including nested selectors and at-rules.

Limitationsโ€‹

caution

Only one class generated by makeResetStyles() can be applied to an element. Otherwise, behavior will be non-deterministic as classes merging will not be done for this case and results depend on order of insertion.

import { makeResetStyles } from '@griffel/react';

const useClassA = makeResetStyles({
/* styles */
});
const useClassB = makeResetStyles({
/* styles */
});

function Component(props) {
/* ๐Ÿ’ฃ Never apply multiple rules from makeResetStyles() to the same element */
return <button className={mergeClasses(useClassA(), useClassB())} />;
}