[Avatar] Use styled-components

[eps1lon]

Quick prototype on how to migrate to styled-components (definitely need a codemod).

• styled-components has a single theme context. We cannot use it to avoid breaking changes with a possible existing styled-components theme and because we couldn't use a default theme
• interop with theme.props (implemented) and theme.overrides (not implemented yet) might be awkward
• How to get displayName to work? styled.div is not helpful
• with this approach we can keep the classes API

[NMinhNguyen]

styled-components has a single theme context.

Just for my own understanding, how many does JSS have? It’s 1 as well, right?

[eps1lon]

Just for my own understanding, how many does JSS have? It’s 1 as well, right?

You can create as many as you want with createTheming.

I'm pretty sure we can't (no default theme) and shouldn't (possible collision with existing theme) use the theming of styled-components.

[NMinhNguyen]

Oh right, but we’re also not currently using it but defining our own context? Didn’t find references to createTheming in the codebase.

[eps1lon]

We have our own bindings to jss in @material-ui/styles and therefore no need to createTheming. If we'd use react-jss we'd use createTheming

[NMinhNguyen]

Cool, was just trying to compare the two approaches because that point stood out to me.

[merceyz]

For future reference: Should be possible to move this into the typescript definitions and get rid of the size cost + get documentation on the classes in the editor. Would need to update the documentation generation to read from the proptypes instead though.