πŸ‡ΊπŸ‡¦ STOP WAR IN UKRAINE πŸ‡ΊπŸ‡¦
Avatar

Emotion

Composition

✏️ Edit this page

Composition is one of the most powerful and useful patterns in Emotion. You can compose styles together by interpolating value returned from css in another style block.

(Edit code to see changes)

With regular css, you can compose styles together using multiple class names, but this is very limited because the order that they're defined is the order they'll be applied. This can lead to hacks with !important and such to apply the correct styles.

For example, we have some base styles and a danger style, we want the danger styles to have precedence over the base styles but because base is in the stylesheet after danger its styles will override the styles defined in danger, as per the cascade rules. In regular CSS, you might do something to make danger take precedence over base like moving the danger class so it's defined later than base, or use !important, or abandon composition and rewrite the styles each time you need them.

(Edit code to see changes)

With Emotion though, you can create styles and combine them.

(Edit code to see changes)

Using Emotion's composition, you don't have to think about the order that styles were created because the styles are merged in the order that you use them.