Best way to handle Themed.X as={component} now?

[ehowey]

Hello,

In the migration to v0.14.x you state that we need to do the following:

All occurrences of <Themed.X as="element"> can be changed to <element sx={t => t.styles.X} />.

This works great if you don't have any additional styles, but take for example a primary button. In some cases I would use this button but bump the font-size up or down a bit resulting in code that looked something like this:

<Themed.Button to="/link" as={Link} sx={{fontSize: 3}}>Button</Themed.Button>

Now the best way I can figure to this (and I am guessing there is a better way) is something like this:

<Link to="/link"  sx={(t) => Object.assign(t.buttons.primary, {fontSize: 3,})}>Button</Link>

I feel a bit dumb here but there has got to be a cleaner way than using Object.assign? I tried a few different ways of using a spread operator but didn't get the syntax right. How would you suggest we do this kind of thing as of v0.14?

[hasparus]

Take note that Object.assign mutates its first parameter, so if you want to use it instead of spread operator, you'd rather do this `

Object.assign({} /* <- empty object */, one, two, three)

I tried a few different ways of using a spread operator but didn't get the syntax right.

Spread syntax in this case looks like the following:

<Link to="/link"  sx={(t) => ({ ...t.buttons.primary, fontSize: 3 })}>Button</Link>

You gotta wrap that object in parentheses (), because the curly bracket right after arrow => { get's parsed as block, not as object literal.

What might also work in this case, is sx.variant.

<Link to="/link" sx={{ variant: "buttons.primary", fontSize: 3 }}>Button<Link>

[ehowey]

Thanks so much @hasparus I knew there had to be a better way! I think I missed a set of brackets in there using the spread syntax which is what I was reaching for at first!