[styles] className contains invalid characters

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

CSS classes should not contains these characters i.e /()

Current Behavior 😯

Class name generated by the @material-ui/styles/styled contains some invalid characters i.e () which are attached to the DOM element.

Steps to Reproduce 🕹

Just use this component

import React, { memo } from "react";
import Paper from "@material-ui/core/Paper";
import styled from "@material-ui/styles/styled";

const MyPaper = styled(Paper)({
    padding: "12px 24px"
});

const Surface = ({ children, ...props }) => (
    <MyPaper {...props}>{children}</MyPaper>
);

export default memo(Surface);

Your Environment 🌎

Tech	Version
Material-UI	4.0.0-beta.0
Material-UI Styles	4.0.0-beta.0
React	16.8.6
Browser	Chromium: 74.0.3729.108

[oliviertassinari]

+90% of the people are using v3 that has this old regexp logic. Let’s have more people transition to v4, see how they respond. My intuition tells me we should revert, but I can be wrong. It’s better to run this experimentation and learn from it🔬:). Let’s wait.

[WitoTV]

@oliviertassinari Here, a little demo https://codesandbox.io/s/kind-silence-k60fe

Based on what I was able to figure out is that Swiper is trying to find elements but when it is trying to search for a class .Swiper-slide-4.WithStyles(Swiper)-slide-1 but that is not even a valid selector, that is why it’s “crashing”. I tried checking it with document.querySelector

UPDATE: I kind of resolved my issue, I moved all my styling from withStyles into makeStyles.