Theme structure

[atanasster]

Hi,

What is the recommended way to structure theming for a custom component that has a container

example component:

    <Box variant="editpage.container">
         ...
        <Box variant="editpage.inner">
           ...
          <Text variant="editpage.text">Edit this page</Text>
        </Box>
      </ExternalLink>
    </Box>

what would be the best practice to define the outermost container (which cound be considered as the defined component itself:

1. name it as container

  editpage: {
    container: {
    },
    inner: {
    },
    text: {
    },
  },

2. Use the default property

  editpage: {
    default: {
    },
    inner: {
    },
    text: {
    },
  },

3. Simply define the outermost Box as the theme key

  editpage: {
   //sx props of outermost container here
    inner: {
    },
    text: {
    },
  },

Sorry for my questions - is there a document with the theming best practices and naming conventions that I can check up?