Does Emotion library have an equivalent of @extend from sass?

[lumenwrites]

I'd like to use utility classes in my emotion styles.

For example, I want to define a class like this in my global styles:

.center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

And then use it in my emotion styles:

const styles = css`
  @extends .center-content;
  ...other styles
`

Kind of like you can do in sass.

What's the best way to accomplish something like this with emotion?

I know I can just define these utility classes as strings, and then add them to the string with something like ${centerContent}, but that would require me to manually import every utility class I want to use, and that's not very convenient.

[Andarist]

but that would require me to manually import every utility class I want to use, and that's not very convenient.

It is very explicit though - we prefer explicit dependencies over implicit ones, so this is what you get.

Stuff like this is possible:

const centerContent = css`
  display: flex;
  align-items: center;
  justify-content: center;
`

const styles = css`
  ${centerContent}
  ...other styles
`