Theming own components

[atanasster]

Hi,

What is the recommended way to add own components to the Theme object

1. Use __themeKey as other components such as Image.

<Box __themeKey="actionbar.container">
  ...
</Box>

• This does not seem to work with typescript (__themeKey is not recognized as a property)
• Even bypassing typescript checks, still for some reason it does not seem to be picked up by Box

2. Use directly @theme-ui/css

<Box sx={get(theme, 'actionbar.container')}>
  ...
</Box>

• this works fine, however its a bit cumbersome to import css and get access to the theme object every time.

3. Maybe some other approach?

Thanks

[atanasster]

Found a third way, so far easiest for me to use:

<Box variant="actionbar.container">
  ...
</Box>

[hasparus]

IMHO this is the solution. __themeKey is not part of the public API.

[atanasster]

Thanks - what about if we want to create components that have their own variants (i.e. buttons-like). Wouldn't it make sense to make themeKey a public API?

[thetimmyc]

I ended up doing something like this too. Any thoughts on "variants" of your own custom components? E.g., I have a Snackbar component, and it has an error variant and a success variant. My actual Snackbar component (working) looks like this:

Snackbar.js 

    <div sx={{ variant: 'snackbarError' }} data-testid="Snackbar">
      ...
    </div>

And I theme it like this:

theme.js

  snackbar: {
    position: 'fixed',
    bottom: '2rem',
    left: '2rem',
    height: '5rem',
    transition: '200ms',
    display: 'flex',
    alignItems: 'center',
    backgroundColor: 'foreground',
    color: 'background',
    paddingLeft: '3rem',
  },
  snackbarError: {
    variant: 'snackbar',
    borderLeft: '3px solid',
    borderColor: 'error',
  }

But it seems there should be a more elegant way; at the very least, it would be nice to add my "variant" modifications (like SnackbarError) inside of my main snackbar theme object, like snackbar.error, snackbar.success instead of having Snackbar and SnackbarError as siblings, since they're really not.

Even better would be the ability, sort of like @atanasster alludes to above to be able to totally customize this, so an implementation could look like

Snackbar.js

  <div themekey="snackbar" variant={variant}>
    ...
  </div>

And then calling Snackbar would simply be

App.js

  <Snackbar variant="error" />

Any thoughts on this, @atanasster or @hasparus ? Maybe there's something similar already in theme-ui that I'm unaware of?

[atanasster]

It is my understanding that themeKey is not to be promoted to public at this time, although i think it should be at some point.

variant=‘themekey.variant’ would be best way atm for me.

[laduke]

Hey,
I was making my own thread, but it's basically this question. What's the recommended way to make components now?

I'm trying to make Table, Td, Th,... etc. They aren't in theme-ui's components package.
It'd be nice if I could create my own theme keys, so "table" would be first class just like button, form, etc.
Also, there's a lot going on in Box I hope I can leverage that, and not re-implement it myself for every component.

If I use a variant, values from the variant win over values the caller passes in with sx, which is maybe something I'm doing wrong or a topic for another discussion.

[lachlanjc]

Two quick thoughts:

• I would definitely wrap Theme UI Box for everything. Otherwise upgrading versions is going to be rough.
• Variant merging is a top feature request that would make this way easier. You could build it yourself in your components, basically taking in the variant prop & reading from your own dictionary spreading those styles into the Box component’s sx prop (alongside forwarding the sx prop so consumers of your components can still use theme variants).

[laduke]

Thanks. Looking in to it.

Side question, my sx prop in the caller is getting converted to a class name before I can get to it:

export const Table = ({ children, ...props }) => {
    console.log(props)
    return <Box as="table" {...props}>{children}</Box>
}

caller:

    <Table a="b" sx={{ padding: 5}}>
...
    </Table>

result:

{
  "a": "b",
  "className": "css-1gmj12n-Caller"
}

I guess a build process thing?
The caller file doesn't have the pragma /** @jsxImportSource theme-ui */, but the Table component does.
I set this up a little while ago and then didn't look at it for a bit, and I'm forgetting how it works kind of.