import { makeStyles, RESET } from '@griffel/react'

const useClasses = makeStyles({ 
  root: {
    color: RESET,
  }
});

function App() {
  // 💡 "classes.root" will be an empty string
  const classes = useClasses();

  return <div className={classes.root} />
}

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

const useClassesA = makeStyles({
  root: {
    color: 'red',
    backgroundColor: 'blue',
  },
});
const useClassesB = makeStyles({
  root: {
    color: RESET,
  },
});

function Component() {
  const classesA = useClassesA();
  const classesB = useClassesB();

  // 💡 After merging, the `color` property will be removed
  const className = mergeClasses(classesA.root, classesB.root);

  // 💡 If `RESET` value is set, it won't be added to the class
  return <div className={classesA} />;
}

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

const useClassesA = makeResetStyles({
  color: 'red',
  backgroundColor: 'blue',
});
const useClassesB = makeStyles({
  root: {
    color: RESET,
  },
});

function Component() {
  const classesA = useClassesA();
  const classesB = useClassesB();

  // 🔴  After merging, the `color` property from `makeResetStyles()` will be still applied
  const className = mergeClasses(classesA, classesB.root);
}