stitches icon indicating copy to clipboard operation
stitches copied to clipboard

reset function returned from createStitches is not in docs

Open jonathanlal opened this issue 1 year ago • 0 comments

If you use createTheme() inside a HOC and then change the values - the theme doesn't update:

export const ProjectProvider = ({ customTheme }:  {customTheme: ConfigType.Theme}) => {

    const theme = createTheme('custom-theme', customTheme);
  
    return (
      <ProjectContext.Provider value={{ something: '' }}>
        <div className={theme}>
          {children}
        </div>
      </FrostbyteContext.Provider>
    );
}
function App() {

const [customTheme, setCustomTheme] = useState();

//useState functionality that changes customTheme values (like colors)

return (
  <ProjectProvider customTheme={customTheme}>
   ...
  </ProjectProvider>
);
}

Using reset() before createTheme() which is returned from createStitches() does fix the issue:

export const { styled, getCssText, globalCss, createTheme, theme, reset } =
  createStitches(defaultStyles);
    reset(); //this makes the values update
    const theme = createTheme('custom-theme', customTheme);

I only found out about reset by looking at the stitches declaration file image

there's nothing in the docs about it: image

Is reset being used correctly here? Should it not be described in the docs?

thanks - i love stitches btw, amazing work

jonathanlal avatar Mar 08 '23 09:03 jonathanlal