Append custom class names to styled component

Is it possible to have classes added via the className prop of a styled component be appended to the end of the class list instead of the start.

Take this button component as an example, which has a custom class added.

const Button = styled('button')(...);

<Button className="my-class">Click Me</Button>

Currently results in:

<button class="my-class css-6r523">Click Me</button>

I would like the my-class to be AFTER the css-6r523 class, like so:

<button class="css-6r523 my-class">Click Me</button>

Is there any way to achieve this, either through React or Babel or something else?

Thanks.

[Andarist]

Should be possible with CacheProvider and prepend option: https://emotion.sh/docs/@emotion/cache#prepend . Works pretty much similar to @emtion/css/create-instance (which you have mentioned by referring to create-emotion)

[Andarist]

This is a common misconception but the order in which you put your class names onto an element doesn’t matter. What matters is the order in which those classes are put into a stylesheet. This means that given this CSS and the following HTML you will always have a red background for both elements:

.blue { background-color: blue; }
.red { background-color: red; }

<div class="blue red">I'm red</div>
<div class="red blue">and I'm red too</div>

Check out the live demo: https://codesandbox.io/s/dank-https-gy6v0?file=/src/index.js

This is mentioned, among other things, in one of our documentation pages: https://emotion.sh/docs/composition