Material-ui: 프로덕션 빌드-클래스 이름 충돌

이 문제에 대한 몇 가지 문제를 이미 보았습니다. 항상 중복 된 className 생성기 인스턴스에 연결되었습니다. 나는 번식 없이는 더 이상 도울 수 없습니다.

지금은 실행 불가능한 문제로 해결하겠습니다. 복제 사례가 있으면 알려주세요.

@oliviertassinari 문제를 재현 할 수있었습니다. 여기에 웹팩 빈입니다 - https://www.webpackbin.com/bins/-KuO6ia3h-JDpBOJncZ3

제 경우에는 2 개의 다른 div에 독립적으로 마운트 된 2 개의 애플리케이션 루트가 있습니다. 둘 다 _jss_에서 insertionPoint 를 재정의하기 위해 JssProvider 로 래핑 된 동일한 재질 UI ThemeProvider insertionPoint 를 사용합니다.

createGenerateClassName 함수를 기반으로 카운터를 사용하여 고유 한 클래스 이름을 갖습니다.

export default function createGenerateClassName(): generateClassName {
  let ruleCounter = 0;

  return (rule: Rule, sheet?: StyleSheet): string => {
    ruleCounter += 1;
    warning(
      ruleCounter < 1e10,
      [
        'Material-UI: you might have a memory leak.',
        'The ruleCounter is not supposed to grow that much.',
      ].join(''),
    );

    if (process.env.NODE_ENV === 'production') {
      return `c${ruleCounter}`;
    }

    if (sheet && sheet.options.meta) {
      return `${sheet.options.meta}-${rule.key}-${ruleCounter}`;
    }

    return `${rule.key}-${ruleCounter}`;
  };
}

그리고 내 스크린 샷은 어떤 이유로 카운터가 복제되었음을 확인합니다.

도움이 필요합니다. 나는 지금 내가 뭘 잘못하고 있는지 모르겠다.

@darkowic 서로 다른 반응 트리간에 jss 인스턴스를 공유해야합니다. 당신은 그러한 변화에 능숙해야합니다.

@oliviertassinari 제 사용자 정의 ThemeProvider

  <JssProvider registry={context.sheetsRegistry} jss={context.jss}>
    <MuiThemeProvider
      theme={context.theme}
      sheetManage={context.sheetsManager}
      {...props}
    />
  </JssProvider>

나는 이것으로 모든 반응 트리를 감싼다.

이 문제를 열어야합니다.

물론입니다. 지금까지 알고있는 것을 요약 해 보겠습니다. 이 문제는 다중 반응 렌더링 트리를 사용하는 즉시 발생합니다. jss 공급자는 각 트리에 대해 하나씩 두 개의 클래스 이름 생성기를 만들 것입니다. 따라서 우리는 클래스 이름 충돌로 끝납니다.
@kof 클래스 이름 생성기를 허용하기 위해 react-jss 에서 JssProvider를 확장해야합니까?

클라이언트 측 응용 프로그램에 대한 해결 방법 : 고유 한 createGenerateClassName 만들고 ruleCounter 래퍼 함수 외부로 이동할 수 있습니다.

import warning from 'warning';

// Returns a function which generates unique class names based on counters.
// When new generator function is created, rule counter is reset.
// We need to reset the rule counter for SSR for each request.
//
// It's an improved version of
// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
//
// Copied from material-ui due to issue https://github.com/callemall/material-ui/issues/8223

// This counter is moved outside from `createGenerateClassName` to solve the issue
let ruleCounter = 0;

export default function createGenerateClassName() {
  return (rule, sheet) => {
    ruleCounter += 1;
    warning(
      ruleCounter < 1e10,
      [
        'Material-UI: you might have a memory leak.',
        'The ruleCounter is not supposed to grow that much.'
      ].join('')
    );

    if (process.env.NODE_ENV === 'production') {
      return `c${ruleCounter}`;
    }

    if (sheet && sheet.options.meta) {
      return `${sheet.options.meta}-${rule.key}-${ruleCounter}`;
    }

    return `${rule.key}-${ruleCounter}`;
  };
}

좋은 것, 우리는 서버에서 그러한 사용 사례를 가지고 있었고 이미 문서에서 대담한 힌트를 계획하고있었습니다. # 5 참조

그러나 이제 실제로 2 개의 병렬 실행 공급자를 지원할 좋은 이유를 찾았습니다.

여러 개의 병렬 JssProvider가 필요로하는 사용 사례가 있는지 조사해야합니다. 만약 있다면 그것을 지원할 무언가를 생각해야합니다.

@kof 클라이언트 측에서 여러 병렬 JssProvider에 대한 사용 사례를 방금 찾았습니다. 그리고 제안 된 솔루션은 구현이 간단하다고 생각합니다. :).

래퍼 함수 외부로 ruleCounter 이동

이것은 서버에서 ruleCounter가 재설정되지 않음을 의미합니다. 우리는 할 수 없습니다.

서버 측에서 JssProviders는 반드시 반응 트리의 동시 비동기 렌더링을 지원해야합니다 (강력한 필요). 그러나 현재 구현에서는 이미 지원됩니다. :)

@darkowic 기본 스택에 대한 액세스 권한이없는 해결 방법을 제안했습니다. 우리는하다. 이 추가 유연성으로 더 잘할 수 있습니다. 클래스 이름 생성기 인스턴스를 허용합니다.

또한 동일한 엔드 포인트에 대한 요청은 항상 동일한 클래스 이름으로 응답해야합니다.

@kof 클래스 이름 생성기를 받아들이 기 위해 react-jss에서 JssProvider를 확장해야합니까?

1. 네 가능한 한 가지 방법은 JssProvider가 다음과 같은 클래스 이름 생성기를 허용하도록 허용하는 것입니다.

import {createGenerateClassName} from 'react-jss'

const generateClassName = createGenerateClassName()

<JssProvider generateClassName={generateClassName}>
  <App1 />
</JssProvider>

<JssProvider generateClassName={generateClassName}>
  <App2 />
</JssProvider>

1. 또 다른 가능한 옵션은 애플리케이션 이름과 같은 접두사를 제공하는 것입니다. 예측할 수없는 양의 애플리케이션이 없다고 가정하면 작동 할 수 있습니다.

<JssProvider classNamePrefix="app-1">
  <App1 />
</JssProvider>

<JssProvider classNamePrefix="app-2">
  <App2 />
</JssProvider>

장점 1 :

• 사용자는 접두사를 제공 할 필요가 없습니다.

프로 2 :

• 사용자는 개발 중에 앱을 식별하는 DOM 클래스 이름에 의미있는 것을 가질 수 있습니다.
• 사용자는 접두사에 대해 더 많은 제어 권한을 갖습니다.
• 충돌하지 않는 접두사를 사용하는 것은 비교적 쉽습니다. 하위 트리가 몇 개만 있고 이름 지정이 이미 충분히 쉬웠거나 해당 이름에 고유 한 번호 접두사를 추가하고 각 요청에서 재설정 할 수 있습니다.

실제로 classNamePrefix 및 generateClassName 소품을 모두 갖는 것이 합리적입니다. 첫 번째는 디버깅 용이고 두 번째는 클래스 이름의 자동화 된 고유성입니다.

https://github.com/facebookincubator/create-react-app/issues/3173 (및 연결된 축소 된 테스트 사례 )을 통해이 문제에 직면했습니다.

제 경우에는 material-ui (동일한 버전)도 사용 하는 앱에 소재 UI 종속 구성 요소 (v1.0.0-beta.11)가 포함되었습니다. 개발 중에는 제대로 작동하지만 프로덕션에서는 클래스 이름 충돌로 인해 레이아웃이 손상됩니다.

이것이 "다중 반응 렌더링 트리"에 해당하는지 확실하지 않고 var ruleCounter = 0; 이전에 createGenerateClassName() var ruleCounter = 0; 이동하여 문제를 _ 해결하지 못했지만 _ 다음을 주석 처리했습니다. _did_ 작업 :

https://github.com/callemall/material-ui/blob/2361339fd6df9bfbb85ed2ee4da9d42ee6fee71c/src/styles/createGenerateClassName.js#L26 -L28

죄송합니다. # 7855를 열었을 때 더 많은 정보를 제공 할 수 없습니다 .😊
이 의견은 기본적으로 프로덕션 빌드를 실행할 때 직면 한 문제를 다룹니다.

파이프 라인에서 이에 대한 해결 방법은 무엇입니까?

react-jss https://github.com/cssinjs/react-jss/pull/155 에서이를 수정해야하는 PR을 만들었습니다.

요약하자.

• @darkowic 의 문제 근본 원인은 https://github.com/callemall/material-ui/issues/8223#issuecomment -331076580에 설명되어 있으며 @kof 의 PR : cssinjs / react-jss # 덕분에 수정 될 예정입니다. 155 및 향후 이러한 상황을 방지하기 위해 새로운 경고 : # 8341이 추가됩니다.

• @tlvince 의 문제 증상은 동일하지만 근본 원인이 다릅니다. 단일 반응 렌더 트리를 사용하고 있습니다. 설치된 복제 된 Material-UI 버전에 연결될 수 있습니다. 경고를 확인하고 정확히 무슨 일이 일어나고 있는지 파악할 수 있다면 다른 문제를여십시오.

• @Robophil 의 문제는 실행하기에는 너무 모호합니다.

충돌하는 클래스 이름이 있고 createGenerateClassName 옵션에 접두사를 추가하면 문제가 해결되었습니다.

여기 에서 훌륭하고 포괄적 인 문서를 사용

@oliviertassinari 요약 감사합니다!

단일 반응 렌더 트리에서이 문제는 빌드의 다른 재질 UI 버전으로 인해 발생할 가능성이 큽니다. 종속성 트리를 확인하고 사용중인 material-ui 버전을 확인하십시오.

yarn list | grep material-ui

내 webpack 구성은 다음과 같습니다.

module.exports = {
    entry: {
        FirstComp: path.join(paths.JS, '/components/FirstComponent/MyFirstComp.js'),
        SecondComp: path.join(paths.JS, '/components/SecondComponent/MySecondComp.js'),
    },
}

이 두 가지 구성 요소와 splitChunks 옵션을 사용하여 빌드 된 공통 구성 요소가 있습니다.
JSSProvider를 사용하여 MyFirstComp 및 MySecondComp에서 기본 내 보낸 구성 요소를 래핑했습니다.
공통 구성 요소 주변에서 JSSProvider를 어떻게 사용해야합니까?

@Sewdn 나는 또한 다른 material-ui 버전으로 인해 발생할 수 있다고 생각합니다. 이 className 충돌 문제는 어제 3.0.0-alpha.1에있는 @ material-ui / styles에서 makeStyles 가 만든 후크 및 useStyles 후크로 마이그레이션하기 시작했을 때 내 앱에서 도입되었습니다.
또한 3.6.0 인 "@ material-ui / core"를 사용했습니다.

갑자기 내 앱 클래스와 material-ui 클래스가 모두 jss1로 시작하여 병렬로 계산되었습니다. 그것은 모든 것을 뒤섞을 것입니다. 예를 들어 jss5를 사용하는 내 헤더는 MuiListItem을 예로 들어 jss5로 스타일을 지정했습니다.

이 솔루션을 따라 https://github.com/mui-org/material-ui/issues/8223#issuecomment -412349569 @iamhosseindhv에 의해 mui-components의 클래스에 ac 접두사가 붙고 문제가 해결되었습니다.

@christiaanwesterbeek 설치 단계를 올바르게 사용하고 있습니까? 의존성 주입을 사용합니다. 모든 상위 구성 요소를 가져 오기 전에 install() 호출을 실행해야합니다.

@oliviertassinari 나는 당신이 어떤 단계를 언급하고 있는지 모르겠습니다. 또한 install() 이 무엇의 일부이고 어디에서 호출해야하는지 모르겠습니다. 이에 대해 더 많이 알게되어 기쁘지만 문서화 된 위치를 알아야합니다.

@christiaanwesterbeek https://material-ui.com/css-in-js/basics/#migration -for-material-ui-core-users를 참조하고 있습니다.

@oliviertassinari install() 모든 구성 요소의 파일에서 호출되어야하는 것 같 습니까? 더 명확한 설명이 필요할 수도 있습니다.

내가 틀렸을 수도 있고 설치가 충돌을 해결할 수 없습니다.
To switch from the default style implementation to this newest version, you need to execute the following code before importing any Material-UI's components:

import { install } from '@material-ui/styles';

install();

@oliviertassinari 설치 방법 before importing any Material-UI's components ?
가져 오기는 항상 babel 및 tsc에 의해 정적으로 처리됩니다.

@zheeeng ES 모듈 가져 오기는 모듈의 맨 위에 올려지고 정의 된 순서대로 동 기적으로 해결됩니다. Material-UI 문서에서 동일한 문제에 직면 해 있습니다. 해결책은 모든 것을 bootstrap.js 모듈에 패키징하고 먼저 가져 오는 것입니다.
https://github.com/mui-org/material-ui/blob/cb30b43e9c6cd49f9b16536a125456f5ea3a85c5/docs/src/modules/components/bootstrap.js#L1 -L13
문제가 지속되면 다른 문제에 대한 토론으로 이동하십시오.

@oliviertassinari 가져 오기 순서를 옮겼습니다.

// entry index.js
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import CssBaseline from '@material-ui/core/CssBaseline'
import { install } from '@material-ui/styles'

...에

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { install } from '@material-ui/styles'
import CssBaseline from '@material-ui/core/CssBaseline'

코드에서 Cannot read property 'text' of undefined 오류를보고합니다. 테마 개체를 검사하면 비어 있습니다.
가져 오기 순서를 다시 전환하면이 부분이 제대로 작동합니다.

const useStyles = makeStyles(
  (theme: Theme) => ({
    root: {
      flexShrink: 0,
      color: theme.palette.text.secondary,
    },
  }),
)

전체 응용 프로그램을 <StylesProvider> 래핑 할 때도 동일한 문제가 발생합니다.

헉

코드에서 Cannot read property 'text' of undefined 오류를보고합니다. 테마 개체를 검사하면 비어 있습니다.

나는 같은 문제가 있었다. "@ material-ui / core"를 3.6.0으로 업그레이드하거나 @ material-ui / styles를 3.0.0-alpha.1로 업그레이드하여 수정되었습니다. 나는 잊었다. 둘 다 더 잘하십시오.

그러나 makeStyles에 전달 된 함수가받을 정확한 테마는 createMuiTheme로 만든 테마가 아닙니다. 대신 기본 테마가 있습니다. 결국 내가하게 된 것은 전달 될 어떤 주제에 의존하지 않는 것이 었습니다. 대신 스타일에 필요한 모든 파일에서 테마를 가져 왔습니다.

@christiaanwesterbeek @material-ui/[email protected] 및 @material-ui/styles/.0.0-alpha.2 을 (를) 설치했지만 여전히이 문제가 있습니다.

이것은 당면한이 문제 (8223)와 관련이없는 것 같습니다. 그러나 어쨌든 여기에 간다. 테마를 가져오고 makeStyles 에 전달하는 함수에 전달되는 것에 의존하지 마십시오. 그리고 당신은 끝났습니다.

누군가 v3.7.0 (https://github.com/mui-org/material-ui/releases/tag/v3.7.0)에서 설치 단계가 여전히 필요한지 여부를 확인할 수 있습니까?

@christiaanwesterbeek 예, 필수입니다. Material-UI v4에서 설치 단계를 제거합니다.

@oliviertassinari 안녕하세요, 최신 v3.9.0에서이 문제가 발생하고 @ material-ui / styles를 사용하지 않습니다. withStyles 에서 core withStyles 을 (를) 사용하고 있습니다. 두 가지 질문이 있습니다. .

1. 지금 mui / styes로 마이그레이션하거나 v4 릴리스를 기다려야합니다. (대규모 앱)
2. 이 해결 방법을 사용하여 https://github.com/mui-org/material-ui/issues/8223#issuecomment -331081785이 문제를 처리하는 적절한 방법입니까? 마침내 빌드에서 잘 작동하지만 처음에 왜 발생하는지 이해하지 못하는 것 같습니다.

감사

최신 v3.9.0에서이 문제가 발생합니다.

@ w3nda 이것은 너무 일반적입니다.이 문제가 발생하는 이유는 백만 가지입니다.

지금 mui / styes로 마이그레이션하거나 v4 릴리스를 기다려야합니다. (대규모 앱)

클래스 이름 해싱 논리를 되돌릴 수 있습니다. 서버의 성능은 크게 향상되지만 클라이언트에는 상당한 비용이 듭니다. 대신 활성화 할 플래그를 제공 할 수 있습니다. 그래서 아니, 최선의 선택은 핵심 문제를 해결하는 것이라고 생각합니다. 이 페이지 https://material-ui.com/guides/server-rendering/#troubleshooting 을 사용해 보셨습니까?

@oliviertassinari 빠른 응답에 감사드립니다. 문제를 디버깅하는 방법을 모르겠습니다. 언급 한 링크는 정적 사이트 역할을하기 때문에 저와 관련이 없습니다 ..
내가 언급 한 의견이 도움이 되었습니까? 제 경우에이 문제의 원인을 알려 주어야하지 않습니까?

@ w3nda 정적 웹 사이트에도 동일한 문제가 있습니다. HTML을 생성해야하므로 서버 측 렌더링 API를 사용합니다. 인덱스 카운터가 두 페이지 사이에서 누출되면 클래스 이름이 올바르지 않습니다. 글쎄, 나는 느린 클래스 이름 생성기가 그러한 문제를 디버깅하는 것 (및 빈도)에 비해 좋은 절충안이라고 생각합니다. 예, @material-ui/styles 업그레이드 할 수 있습니다. 간단한 탈출구입니다.

나는 방금 비슷한 문제가 있었고 라이브러리 중 하나에 있던 오래된 material-ui 가져 오기였습니다. 개발 모드에서는 잘 작동했지만 프로덕션에서는 손상되었습니다. 나는 이것이 전에 작동했다고 확신합니다.이 경우 경고가 발행 될 수 있는지는 확실하지 않습니다.
프로젝트간에 일치하도록 버전을 업데이트했고 모든 것이 다시 작동했습니다.

안녕하세요, 저는 제 사이트의 단일 입력, 버튼 및 양식에만 자료를 사용하고 있으며이 댓글 다음에 <JssProvider /> 를 사용해야했습니다. https://github.com/mui-org/material-ui/issues / 8223 # issuecomment -331412432

이 jss 공급자가 필요하다는 것은 성가신 일입니다. 최종 빌드 크기를 늘리지 않도록 할 수있는 또 다른 수정 사항이 있습니까?

@kopax JssProvider 를) 무엇에 사용하고 있습니까?

안녕하세요 @oliviertassinari , production 다른 경로를 방문하기 전에 (react-router를 사용합니다) :

경로 방문 후 production 또는 development

여기서 비슷한 일이 양식 (이상한 상자 그림자)에서 발생합니다. 프로덕션에서만 발생하는 적절한 CSS를 갖기 위해 다른 페이지를 방문해야합니다.

JssProvider 추가하면 두 문제가 모두 해결됩니다. (고정 : 우리가 같은 CSS를 가지고 production 에 비해 development )

나는 모른다. 제공된 정보로 도와 드릴 수 없습니다.

모든 것도 망가졌습니다. 프로덕션에서 잘못된 주문 jssXX 클래스를 발견하고 결과적으로 잘못된 스타일이 지정됩니다. 페이지를 새로 고친 후에 발생합니다.

아직 이유를 찾을 수 없습니다.

@oliviertassinari 아마도 우리가 사용하고있는 [email protected]에서 사용하는 버전 번호는 무슨 일이 일어나고 있는지 알려주는 데 도움이 될 것입니다.

        "@material-ui/core": "^1.4.0",
        "@material-ui/icons": "^1.0.0",
        "material-ui-chip-input": "1.0.0-beta.6 - 1.0.0-beta.8",

Material-UI가 한 번만 번들로 제공되도록 할 수 있습니까? 두 가지 버전을 동시에 사용하면 동일한 버그가 발생할 수 있습니다.

잘. 있을 수있다. 버전 ~ 1.5를 권장하는 react-admin 을 사용하고 있습니다.

JssProvider 를 추가하여 프로덕션 버그를 해결했습니다. 이제 페이지를 정상적으로 새로 고칠 수 있습니다.

import React from "react";
import { Admin, Resource } from "react-admin";
import JssProvider from "react-jss/lib/JssProvider";

const App = () => (
  <JssProvider>
    <Admin dataProvider={dataProvider}>
      <Resource name="trip" list={RequestsList} className="resourceItem" />
    </Admin>
  </JssProvider>
);

export default App;

@andrewkslv 이것이 바로 우리가 피하려는 것입니다. @ material-ui의 Input 및 Button 구성 요소 만 사용하므로 JssProvider 없이 사용하는 것이 좋습니다. , 대신 나머지 UI 를 react-admin에 사용하는 것을 선호합니다.

@oliviertassinari 방금 확인했고 몇 가지 종속성 문제가있었습니다. 수정 했지만 여전히 다음 npm ls @material-ui/core 오류가 발생합니다.

├─┬ @bootstrap-styled/[email protected]
│ └── @material-ui/[email protected] 
├── @material-ui/[email protected] 
└─┬ [email protected]
  └── @material-ui/[email protected] 

수행 후 :

rm -rf node_modules/@bootstrap-styled/ra-ui/node_modules/@material-ui/
rm -rf node_modules/ra-ui-materialui/node_modules/@material-ui/
npm ls @material-ui/core
├─┬ @bootstrap-styled/[email protected]
│ └── UNMET DEPENDENCY @material-ui/[email protected] 
├── @material-ui/[email protected] 
└─┬ [email protected]
  └── UNMET DEPENDENCY @material-ui/[email protected] 

이제 작동합니다 (프로덕션에서 CSS 문제 없음). 이건 내가 원하는 게 아닌 것 같아 ...

관련 프로젝트 @ material-ui 종속성 :

• @ bootstrap-styled / [email protected]/package.json#L293
• [email protected]/package.json#L44

무엇을해야할지 아십니까?

@kopax 디버깅 할 수있는 것이 없으면 말하기가 어렵습니다. 지금 작동한다는 소식을 듣고 기쁩니다.

Material-UI에서 스타일 구성 요소를 사용하고 있음을 확인했습니다. 시간이 있다면 Gitter의 통합에 대해 이야기하고 싶습니다.

작업 솔루션은 자연스럽지 않습니다. 즉, npm으로 실행할 수없는 작업이 포함됩니다. 나는 그것을 사용하지 않을 것이다. 나는 이것을 힌트로 주었다.

우리는 월요일에 기회를 가질 것이고, 나는 mui gitter 채널에 참여할 것입니다.

안녕하세요 @kopax , 해결책을 찾았습니까?

아니, 아직. 공급자 없이는 아닙니다. @oliviertassinari 나는 기운에있다.

@andrewkslv 귀하의 솔루션이 정말 저에게 react-admin 및 AWS Amplify를 사용하고 있습니다. 반응 애플리케이션을 S3 버킷에 배포 할 때마다 스타일이 모두 깨졌고 솔루션이 저를 정말로 구했습니다.

여기에도 같은 문제가 있습니다. JssProvider를 추가하는 것이 도움이되는 이유는 무엇입니까?

중복 된 스타일 인스턴스가 사용될 때 경고하기 위해 v4에 경고를 추가했습니다 : # 15422.

모르겠어요. 나는 react-admin 에서 새로운 버전의 머티리얼 UI를 프레임 워크에 구현할 때이 문제를 제기했지만 무시되었습니다.

https://github.com/marmelab/react-admin/pull/3102#issuecomment -484228320

프로덕션 빌드 클래스 이름 충돌 # 8223에 대한 해결책은 어디에서 찾을 수 있습니까?

감사,

@oliviertassinari 내가 모든 지침을 따랐음에도 불구하고이 문제에 다시 직면했습니다. 다른 사람들을 위해 일하고 있기 때문에 나는 기본적인 것을 놓치고있을 수 있습니다.

https://stackoverflow.com/questions/58938080/jssprovider-not-generating-class-prefix-with-classnameprefix

다음 버전의 패키지를 사용하고 있습니다.

"@ material-ui / core": "^ 4.6.1",
"@ material-ui / icons": "^ 4.5.1",
"반응": "^ 16.12.0",
"react-dom": "^ 16.12.0",
"react-jss": "^ 10.0.0",
"반응 스크립트": "3.2.0"

업데이트 : 문제가 해결되었습니다. 문서화를 철저히하지 못해 죄송합니다. 문서의이 부분이 내 문제를 해결했습니다.

https://material-ui.com/styles/api/#creategenerateclassname -options-class-name-generator

그러나 어떻게 든 다른 모든 사람들을 위해 작동하고 있던 JSSProvider 솔루션이 저에게는 작동하지 않았습니다. 어쨌든 감사합니다 :)

@KannugoPrithvi 감사 https://material-ui.com/styles/api/#creategenerateclassname -options-class-name-generator