Calling Stitches createStitches for every component in React

Question

I'm using Stitches to write my CSS in a React application, mainly for the theming and variables. I'm calling createStitches in every component file, like so:

ComponentA.tsx

import { createStitches, styled } from "@stitches/react";

const { createTheme } = createStitches({ theme: {...} });

...

export default ComponentA;

ComponentB.tsx

import { createStitches, styled } from "@stitches/react";

const { createTheme } = createStitches({ theme: {...} });

...

export default ComponentB;

And then I'm importing these components and using them in App.tsx:

import ComponentA from "./components/ComponentA";
import ComponentB from "./components/ComponentB";

function App() {
  return (
    <div className='App'>
      <ComponentA />
      <ComponentB />
    </div>
  )
}

I know I can just call the createStitches in the App.tsx file once, but I like keeping my components self-sufficient, as in they should work without any other extra work. Is this a bad approach, or is this something that is fine to do? Does React call the function many times, or just once? Thanks for any help!

Answer 1

You do not need to call createStitches for every component. This function is to create configuration for your application styling. I don't that you are going to have separate configuration for every component. This will just cause extra work. Just keep the createStitches in a common file and import it from there