Pass custom styles to a component that already has custom styles but don't overwrite

[coral latch]

I have a component that I've defined custom styles to, e.g.

<Button
        styles={(theme, params) => ({
          root: {
            minWidth: params.variant === 'subtle' ? undefined : 172,
            ```

When I use it in my app, I sometimes need to pass extra styles on `root`, for example: ` textDecoration: 'none'` However, if I just pass it via `styles` the already existing styles (minWidth) disappears. I have to pass both `minWidth` and  `textDecoration` in this case. How can I make it so I have to just pass the extra styles but the pre-existing ones remain there?

[heady ivy]

root: {
minWidth: params.variant === allYourOldCodeLikeAbove,
...params.rootAdditonalStyles
}

you can have a styles object like that with valid CSS inside

writing to it will expand current existing styles

[coral latch]

I tried something like that. Doesn't work. How would I pass it from the new Button component?

Like <Button customStyles={{root: ....}} ?

[heady ivy]

it should work fine - make a codesandbox if you can using the link in the sidebar of this channel, it will be easier to explain as right now it isn't clear how your custom component is structured

[coral latch]

Will do. The way you described above is the 'proper' way of doing it, right?

[heady ivy]

no clue, either way usually there is many different ways to do things, don't worry about doing things "the right way" too much