CODEWITHSUNDEEP
reactjsmaterial-uistyled-componentsjss
András Geiszl
András Geiszl

Reputation: 1064

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

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?

Upvotes: 3

Views: 2894

Answers (1)

Sheldon Oliveira
Sheldon Oliveira

Reputation: 1005

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

Upvotes: 2

Related Questions