Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

Any issues with using styled-components with sanity?

10 replies
Last updated: Oct 7, 2020

Any issues with using styled-components with sanity?

Oct 7, 2020, 4:53 PM

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.

Oct 7, 2020, 7:11 PM

there was an issue on the sanity repo about customizing webpack 🙂 but not possible yet, only babelrc as you said

Oct 7, 2020, 7:25 PM

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.

Oct 7, 2020, 7:27 PM

I did! I saw some code in the sanity repo that picks up the babelrc file if it is present

Oct 7, 2020, 7:28 PM

  "presets": [
        "targets": {
          "node": "8",
          "chrome": "59",
          "safari": "10",
          "firefox": "56",
          "edge": "14"
        "modules": "commonjs"
  "plugins": ["@babel/plugin-proposal-class-properties", "babel-plugin-macros"]

Oct 7, 2020, 7:28 PM

I combined what I found in babelrc in

user U
/base and in the root dir if im not mistaken

Oct 7, 2020, 7:28 PM

Nice! Thanks for the share!

Oct 7, 2020, 7:28 PM

Cause it needs to have at least the same config

Oct 7, 2020, 7:29 PM

Then I added "babel-plugin-macros" myself 🙂

Oct 7, 2020, 7:29 PM

Sweet I’ll give it a shot

Oct 7, 2020, 7:29 PM Get the most out of your content is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Free to get started, pay-as-you-go on all plans.