Get help on Discord

Any issues with using styled-components with sanity?

10 replies
Last updated: Oct 7, 2020
Any issues with using styled-components with sanity?
AI Update

There are a few known compatibility issues between styled-components and Sanity that you should be aware of, particularly around version mismatches with @sanity/ui.

The main issue: styled-components v6 breaking changes

The most common problem stems from styled-components v6 removing the default export. In v5, you could do import styled from 'styled-components', but v6 requires named exports: import { styled } from 'styled-components'. This causes the error 'styled' is not exported from 'styled-components' that you might encounter.

@sanity/ui dependency requirements

@sanity/ui (which Sanity Studio uses internally) has a peer dependency on styled-components. The current versions support both v5 and v6 with the peer dependency range "^5.2 || ^6". However, version mismatches can cause build failures, especially when:

  • Building Next.js applications with embedded Studio
  • Developing custom plugins with linked dependencies
  • Using different styled-components versions between your project and @sanity/ui

The solution

Based on community reports, upgrading to styled-components v6 typically resolves these issues:

npm install styled-components@^6
# or
pnpm add styled-components@^6

After upgrading, make sure to:

  1. Delete your node_modules folder and lock file
  2. Reinstall dependencies
  3. Restart your dev server

For plugin development

If you're developing a Sanity plugin, ensure @sanity/ui is explicitly installed in your plugin's dependencies and matches the version used by your Studio. Version mismatches between the plugin and Studio can cause theme crashes.

Current compatibility

As of 2024-2025, @sanity/ui v2.0.7+ works well with styled-components v6.1.8. This combination is stable for both vanilla Studio setups and Next.js integrations.

If you're still experiencing issues after upgrading, double-check that you don't have multiple versions of styled-components installed across your dependency tree, as this can cause runtime conflicts.

If anyone else is curious seems to work fine. Only issue was I wasnt able to add the “babel-plugin-styled-components” because having a custom .babelrc file throws errors and prevents sanity from starting. Wasn’t able to find any info on how to customize the webpack for sanity.
there was an issue on the sanity repo about customizing webpack 🙂 but not possible yet, only babelrc as you said
Yeah I saw that issue maybe it will be possible one day. So are you able to add a .babelrc file? Mine threw some errors when I added it.
I did! I saw some code in the sanity repo that picks up the babelrc file if it is present
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "node": "8",
          "chrome": "59",
          "safari": "10",
          "firefox": "56",
          "edge": "14"
        },
        "modules": "commonjs"
      }
    ],
    "@babel/react",
    "@babel/typescript"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties", "babel-plugin-macros"]
}
I combined what I found in babelrc in
user U
/base and in the root dir if im not mistaken
Nice! Thanks for the share!
Cause it needs to have at least the same config
Then I added "babel-plugin-macros" myself 🙂
Sweet I’ll give it a shot

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?