How to easily inspect styled-components using dev tools?
That's exactly why we created our Babel plugin, when using it you'll get class names that include the name you gave your component:
<div class="Sidebar__Button-KSdffgy oPwefl">
On top of that we set the displayName
of the generated component too, which means in your React DevTools you'll see the actual component name rather than just <div> or <Styled(Component)>.
To use the Babel plugin install it with npm install --save-dev babel-plugin-styled-components
and then add it to your Babel configuration: (e.g. in your .babelrc
)
plugins: ["styled-components"]
That's it! Happy debugging ð
Note that if you're using create-react-app
you cannot change the Babel configuration. I use and would recommend react-app-rewired
to be able to change configurations without having to eject. We've also built react-app-rewire-styled-components
which automatically integrates the styled-components Babel plugin for you!
For anyone using create-react-app, just substitute
import styled from "styled-components";
to
import styled from "styled-components/macro";
this will make your styled-component classes have the name of their component in them. And you'll be able to know which classes refer to which components just by looking at their class name ;)
For anyone using create-react-app
, another option is to use the styled components babel macro
npm install --save babel-plugin-macros
- Inside your component use
import styled from 'styled-components/macro';
instead ofimport styled from 'styled-components';
You should now see the component name in your dev tools: