Any issues with using styled-components with sanity?

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.