Is evergreen-ui compatible with Frontity?

🙋Get Help
1

Hi! I’m trying to use evergreen-ui on a project with Frontity, but the styles are not loaded in SSR.

What I’m not sure is if Frontity is compatible with any CSS-in-JS solution or just with UI frameworks based on emotion.

Also, this library package only has the bundled version of the library, so I guess because of that it’s impossible to load those styles in SSR. Right?

3

Hi @orballo

We haven’t done a deep comparison of UI libraries that can be used with Frontity but I guess that any UI library what works with CSS in JS and has SSR support should work just fine

Here you have a list of some options (the ones w/ SSR support) that should work with Frontity

Hope this helps

5

I don’t think this is actually true. I just checked the support for SSR (https://github.com/segmentio/evergreen#how-does-server-side-rendering-ssr-work) in evergreen-ui and it does offer support but it doesn’t work with Frontity. At least out of the box.

I think (I’m not sure though) that this Frontity needs an entry point for this kind of libraries. In this case evergreen-ui is exposing a function called extractStyles that I guess it should be called by Frontity somwhere.

EDIT: Ok, I made it work and the solution was quite easy (not sure if ideal though):
EDIT 2: This solution doesn’t work properly. It looks like there is some race condition that makes the styles flicker sometimes.

import React from "react";
import { connect, Global } from "frontity";
import { extractStyles } from "evergreen-ui";
import Main from "./main";

const Root: React.FC = () => {
  const { css } = extractStyles();

  return (
    <>
      <Global styles={css} />
      <Main />
    </>
  );
};

export default connect(Root);
7

Did you try including the hydration script like in the NextJS example? https://github.com/segmentio/evergreen/blob/master/examples/ssr-next/pages/_document.js

Other than that, this library seems really big, and it includes glamour (alternative CSS-in-JS to emotion) and babel-runtime (which is not needed in Frontity). It seems to have tree shaking so it would be interesting to know what actual size it has in your final bundle.

1 Like
9

You are right. And I have run into different errors regarding references and so on. I decided to use Sancho (https://sancho-ui.com/) instead (which seems to have started as a fork of Evergreen). And it is recommended to use with emotion. I’ll let you know how it works.

1 Like