Is it possible to separate styles from components?

[GhostOrder28]

So I been using evergreen for some months to build a personal project, the way you can include css in the components directly it's very handy, specially in my case because I was learning reactjs on my own and I wanted to focused almost entirely on programming and not css

However as my project grew in complexity so did the component style customization and I ended having components with more than 4 o 5 style props, including the functionality props you normally pass (state, data from backend, functions, etc) made really big components.

Since evergreen uses glamor I thought I can use it this way:

const myButtonStyled = css({  
  height: 50,
  width: 50
}).toString();

<IconButton icon={MenuIcon} className={myButtonStyled} />

The styles are being applied but they are also being ...overridden?

However this works on some components, the Pane component for example doesn't have this overridden problem and it displays the styles just fine as expected.

What is the correct way to set styles with glamor in evergreen components?

PD: I also thought in styled-components but it is discouraged here

[brandongregoryscott]

Hey @GhostOrder28 -

In most cases you want to use the css props that we expose directly, and avoid trying to pass custom className prop values unless you have a specific use-case. You'll likely run into situations where the internal css collides with the css the class name is trying to apply.

If you have a certain style that you want to use for components across your whole app, you probably want to take a look at the Theming API. You might want to override the baseStyle of the Button component, or define a new appearance entirely in your first example.

Note that not all components have appearance support, or expose all of their styles for being overridden via the theme.

In some cases, it might be easier to just compose a new version of the base Evergreen component that has all of those props set by default and use that instead:

import React from "react";
import { Card, CardProps, useTheme } from "evergreen-ui";

interface PlaceholderCardProps extends CardProps {
  children?: React.ReactNode;
}

const PlaceholderCard = (props: PlaceholderCardProps) => {
  const { children } = props;
  const { colors } = useTheme();
  return (
    <Card background={colors.gray50} borderColor={colors.gray100} {...props}>
      {children}
    </Card>
  );
};

[GhostOrder28]

In some cases, it might be easier to just compose a new version of the base Evergreen component that has all of those props set by default and use that instead

Yep that's how I was doing it until now, is just that I was looking for a way to extract the style code to an external file and glamor seemed to help with that but it also create other problems it seems.

I knew about the theming feature but didn't look deep into it, I will definitely look further into it, thanks!