Styled-components generate unique hashes for each styled-component you create. They look like
.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
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';