Styled-components pleasant class names

Styled-components generate unique hashes for each styled-component you create. They look like .nNUbag or .JbCpiZ. From a production perspective, these names are beneficial, since it reduces bundle size, but the development process is a nightmare.

Thankfully, there is a solution: babel-plugin-styled-components. It changes the class names to use the component name, which will help you in debugging process. The exact pattern is fileName__componentName-hash, eg. styles__StyledSearchBar-hXxaWb. Also, you don’t have to worry about production bundle size, cause it works only in development.

If you use create-react-app, the plugin is already set up. The only thing you have to do is update your imports.

import styled from 'styled-components/macro';

Tweet