Open rnwonder opened 1 year ago
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
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 ={
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
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.
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