Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Emotion styles overriding equally-specific non-Emotion styles.

See original GitHub issue

I’m currently in the process of building a shared component library, and one of the requirements is that any given component’s style can easily be overridden by the consumer of said library.

emotion version: 9.2.12
react version: 16.4.2

Take the following (pseudo-code) example:

<html>
  <head>
    <style>.custom-style {color: red;}</style>
  </head>
  <body>
    <div id="react-root">
      <!-- React Component -->
      <CustomComponent className='custom-style'>Hello</CustomComponent>
    </div>
  </body>
</html>

const style = css`
  color: blue;
`
const CustomComponent = ({className, children}) => (
  <div className={`${style} ${className}`}>{children}</div>
)

Reproduction

Attempt to override any Emotion CSS property with an equally-selective style in the document <head> not created with Emotion.

Problem description:

The behavior I’d like here is for the color of the word “Hello” to be red. Currently, it seems that emotion appends, rather than prepends its style tags in the document <head>, giving it precedence over application styles with the same CSS specificity.

Issue Analytics

State:
Created 5 years ago
Comments:15 (5 by maintainers)

Top GitHub Comments

2reactions

DesignerDavecommented, Oct 10, 2022

@teknotica We simply use patterns like this:

import { cx, css } from '@leafygreen-ui/emotion'; // We have a package containing our custom instance.

const componentStyles = css`
  // Whatever styles you need
`;

const otherComponentStyles = css`
  // Perhaps some conditional styles based on a prop
`;

function MyComponent({ someBooleanProp }) {
  return (
    <div
      className={cx(componentStyles, {
        [otherComponentStyles]: someBooleanProp,
      })} />
  );
}

You miss out on a few features and “optimizations” (according to the docs, a little unclear myself on which optimizations they’re talking about), but if you keep to using cx and css, it’s altogether optional, and not a dependency of any of the 40-50 packages our design system ships now!

1reaction

DesignerDavecommented, Oct 10, 2022

Hey @teknotica! We’re still building the component library I wrote about 4(!) years ago using Emotion. We’re still very much in the same boat, except that luckily custom instances got the capability to prepend natively using the custom instance config. Originally, we had a hacky workaround where we inserted a <div> into the <head> (which is technically not to HTML specs, but did work across browsers consistently), and setting that div to be the “container” for Emotion’s style tags.

It’s my understanding that the create-emotion-styled package isn’t compatible with the latest version of Emotion. I believe we tried using this a while ago, and found that the package hasn’t been updated in roughly 4 years. I’d be interested to hear if you have been able to use the styled API using this package on the more recent versions of Emotion! There’s another issue where the maintainers clarify that create-emotion-styled doesn’t have an Emotion 10 counterpart, and I don’t think this changed in Emotion 11: https://github.com/emotion-js/emotion/issues/1207#issuecomment-459995445

The main concessions we’ve made to support prepending the styles with Emotion are:

We unfortunately can’t use the styled API within the library. We haven’t found an actively-supported way to use this API. While we’d love to be able to use it, we keep our usage to cx and css within the library.
We don’t use the @emotion/react package despite using React. This does unfortunately prevent us from using the css prop and some other small features, but you may not need it overall.

I will be clear that in Emotion with these limitations, you can make an effective and scalable design system. Sure, it’d be a bit nicer to maintain with styled, but it’s still better than using something like CSS modules for a design system library.

I still would love the maintainers to support styled using custom instances of Emotion. For Design Systems library maintainers like us, the CacheProvider approach is a non-starter since we usually don’t control where our components are rendered (at least in our case, where our library was built to work with a ton of pre-existing applications). We also have to work with these applications that may also use Emotion, and we don’t want our code to potentially modify the behavior of their own styles.

I apologize that this isn’t as satisfying an answer as you were probably looking for. Ultimately, it definitely feels as though the custom instances of Emotion are second-class way of using the library, even though DS libraries must use this approach if they need to be compatible with other libraries, vanilla/precompiled CSS, etc.

Top Results From Across the Web

Overriding styled-components with `css` prop in Emotion

I'm trying to override the base styles of an Emotion styled component with some inline styles - specifically a css prop. The inline...

The css Prop - Emotion

Style Precedence. Class names containing emotion styles from the className prop override css prop styles. Class names from sources other than emotion are ......

HANDBOOK OF EMOTIONS - Ashoka University Library

Handbook of emotions / edited by Michael Lewis, Jeannette M. Haviland-Jones,. Lisa Feldman Barrett. ... emotional styles of a particular period, in and....

Lewis Eugene Rowell - Thinking About Music. An Introduction ...

when we ascribe emotion or feeling to a com- ... trends in musical style left the menuet as a self- ... Song styles,...

How to ensure your Emotion ‍ CSS-in-JS styles are indeed ...

To make sure the Emotion styles are overwriting the CSS Module styles in production, the Emotion <style data-emotion> tag needed to come after ......