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' },
});
.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โ
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())} />;
}