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