Is it possible to use a custom class name generator for styled components in MaterialUI?

Question

I'm using an unejected create-react-app project with MaterialUI and trying to replace JSS with Styled Components. It's working fine, but the class names generated are not human readable.

I read that you can use a babel plugin to do that, but I can't change the Babel config without ejecting the project. I know that you can supply a custom class name generator function to StylesProvider to generate JSS class names. Is there a similar mechanism for Styled Components that would allow me to change the class names without ejecting my project?

user_7050878 · Answer

Basically import like this, with macro:

import styled from "styled-components/macro";

It has the same functionality of the plugin, take a look in the documentation: https://www.styled-components.com/docs/tooling#babel-macro

example here: https://codesandbox.io/s/nostalgic-sea-8m3q1?fontsize=14

Is it possible to use a custom class name generator for styled components in MaterialUI?

1 Answers