Difficulty Modifying Components

[rnwonder]

Its difficult to modify several of your components.

Take tooltip for example I can't give it my own background color and text color or add borders or even remove border radius

Same apply to dialog. can't change the default background color can't remove the initial padding on the modal. Cant increase the

Your styling for button overrides CSS on build (React) always have to include important in CSS to override.

would love to be able to do say position={Position.LEFT + 20} if needed

[brandongregoryscott]

Hey @rnwonder - sorry you're having trouble customizing the components you're using. Can you provide a code sample of how you're trying to restyle the components you mentioned?

Most components have a theme object that can be overridden or extended with a custom appearance. I would recommend reading over our Theming documentation to get an idea of how it might work, but I've also whipped up a quick sandbox demonstrating a Tooltip with a custom background and text color, border and border radius: https://codesandbox.io/s/issue-1578-custom-tooltip-styling-7bhrrv?file=/src/App.tsx

Not all of our components are 100% configurable, but if you're having trouble restyling a specific piece of a component, it might be helpful to take a look at how we style the component ourselves in the codebase: https://github.com/segmentio/evergreen/tree/master/src/themes/default/components

[rnwonder]

Yes Thanks For your response. It was really helpful. Will look into applying it. But how about passing custom components to toaster to render instead of the default design.

Say for example

<Toaster customComponent ={} /> Thats still used all the fun stuff of the current toaster just with a different design.

so when we call toaster.danger we get it with this custom component.

Most of my other issues are with the configuring existing components. Will try out the themeing and get back to you If I have more issues

MODIFIED

Can we get more extensive documentation for you theming? The one below isn't extensive enough

https://evergreen.segment.com/introduction/theming

If possible add to each components documentation and ways to modify each part of the component. Take Alert for example I have been trying to update the increase the font size of the title, but its been a challenge

const customTheme = mergeTheme(defaultTheme, { components: { Alert: { appearances: { alert: { backgroundColor: '#F5F9FB', color: '#263238', fontSize: '260px', }, }, sizes: { alert: { fontSize: '106px', }, title: { fontSize: '106px', }, }, }, }, });

I have to do trial and error even with typing from typescript. It's not a good experience. If your doc shows me like ok for Alert here's how you style this and that. Here's how to remove or add your own icons. Here are all the stuff you can modify so I don't waste time trying to modify something I cannot

[brandongregoryscott]

But how about passing custom components to toaster to render instead of the default design.

Unfortunately our Toaster component is not quite setup to do this, or even for theming. (It renders an Alert under the hood - but you can't pass thru any props to change the appearance)

If possible add to each components documentation and ways to modify each part of the component.

We'll certainly take this into consideration for future iterations! Unfortunately it would be quite exhausting to enumerate what can/can't be themed right now, and some components simply aren't setup in a way that makes them very flexible with the theme. It'd be nice to take a second pass on all of these components and try to standardize where styles are while we add in more specific theming documentation for each component.