Debugging styled components with Create React App

Question

I've installed Styled Components into my Create React App, and everything works fine, but by default, it looks as though the class name it appends to the element isn't based off of the styled component name (ie. MyButton should create an element with the class MyButton-134as23f).

In the Styled Components documentation, it says to install the babel-plugin-styled-components, and then configure the .babelrc file, however, from what I understand, we don't have access to that file until we eject from the app.

So how can I debug styled components while I am developing an app within Create React App?

Answer 1

I was able to find an answer to this:

Because Create React App is a zero-config application, the only way to add anything to the .babelrc file is to eject from React.

Obviously, I wanted to keep all of my tooling, and came across babel-plugin-macro. It's essentially a way for users to run libraries at compile time, without having to configure their Babel file beforehand.

So after installing it to my devDependencies, I then changed the import path to import styled from 'styled-components/macro, and all of the Babel plugin features that you would normally need to eject for came standard with Styled Components.

Let me know if you have any questions or trouble with my answer.

Hope this helps!