Ability to create a class name string from a style object.

[trustin]

Is your feature request related to a problem? Please describe.

I need to work with other components that don't work well with Styled System. They allow me to style them by specifying one or more class names, though.

For example, I need to specify two class names to style <CookieConsent /> (https://github.com/Mastermindzh/react-cookie-consent):

<CookieConsent
  declineButtonText="Opt out"
  buttonClasses="..."
  declineButtonClasses="..."
  ...
/>

Emotion provides a component called <ClassNames /> so a user can generate a cached class name from a style object, but it doesn't understand Styled System's theme object.

Describe the solution you'd like

To solve this issue, I wrote an alternative component which applies css() to a style object before passing the style object to Emotion's ClassNames:

import { ClassNames as EmotionClassNames, Interpolation } from '@emotion/core';
// @ts-ignore
import { useThemeUI } from '@theme-ui/core';
// @ts-ignore
import { css as themeUICss } from '@theme-ui/css';
import React from 'react';

interface ClassNamesContent {
  cssToClassName(styleObject: Interpolation): string;
}

interface ClassNamesProp {
  children(content: ClassNamesContent): React.ReactNode;
}

const ClassNames: React.FC<ClassNamesProp> = props => {
  const { theme } = useThemeUI();

  return (
    <EmotionClassNames>
      {({ css: emotionCss }) =>
        props.children({
          cssToClassName: styleObject =>
            emotionCss(themeUICss(styleObject)(theme)),
        })
      }
    </EmotionClassNames>
  );
};

export default ClassNames;

With this component, I was able to do this:

<ClassNames>
  {({ cssToClassName }) => (
    <CookieConsent
      declineButtonText="Opt out"
      buttonClasses={cssToClassName({ width: ['100%', 1/2 ] })}
      declineButtonClasses={cssToClassName({ width: ['100%', 1/2 ] })}
      ...
    />
  )}
</ClassNames>

Describe alternatives you've considered

I'm not an expert in frontend technology, so I'm not sure if this is the best way to solve this problem. Any better suggestions would be appreciated.

[lachlanjc]

There might be a way to do this, but I’m not aware of it. I’ve run into this as well though.

[hasparus]

I wanted to propose a workaround I usually use

<div
  sx={{
    [".CookieConsent__Button"]: {
      color: 'blue'
    }
  }}
>
    <CookieConsent
      declineButtonText="Opt out"
      buttonClasses={"CookieConsent__Button"}
    />
</div>

but your solution is pretty awesome. Nice :D

[muhajirdev]

thanks for the idea @hasparus .

[lachlanjc]

It looks like Emotion doesn’t directly offer this functionality, so I don’t think Theme UI can/should. The css utility we export offers support for parsing Theme UI’s sx type of CSS, & there’s the type of workarounds Piotr suggested. If you see a good way to implement this though, go for it, PRs welcome!

[hasparus]

It looks like Emotion doesn’t directly offer this functionality

I just wanted to disagree — there's this one https://emotion.sh/docs/class-names.

I think we'd accept a PR for @theme-ui/classnames package, but I'm happy enough with my workaround, that I'd probably never use it.

Another thing, you can add your global classNames to styles.root. They will have higher specificity than ones made from ClassNames component, but I never found it a problem.

[lachlanjc]

You’re totally right, I missed that, thanks! Yep, it’d be cool to have a package, though I’m not interested in contributing it personally. Did you want to reopen @hasparus?