Order of stylesheets changing

Author: AnahkiasenCreated May 29, 2016Updated May 19, 2026

Labelsbug

I'm passing two dynamic links to stylesheets to react-helmet like this:

javascript

const links = [
    {
        rel: "stylesheet",
        href: `/dist/stylesheets/themes/${someVariable}.css`
    },
    {
        rel: "stylesheet",
        href: "/dist/stylesheets/core.css"
    }
];

<Helmet links={links} />

On first and subsequent renders everything is correct:

xml

<link rel="stylesheet" href="/dist/stylesheets/themes/dark.css" data-react-helmet="true">
<link rel="stylesheet" href="/dist/stylesheets/core.css" data-react-helmet="true">

However as soon as someVariable changes, and the head tags are recomputed, the order changes to this:

xml

<link rel="stylesheet" href="/dist/stylesheets/core.css" data-react-helmet="true">
<link rel="stylesheet" href="/dist/stylesheets/themes/light.css" data-react-helmet="true">

Throwing the whole design away. Is there a way to enforce the order of link tags?

Source: nfl/react-helmet

View original on GitHub View discussion on GitHub