静态服务时来自不同组件的 React + Material-UI 样式 类 冲突
React + Material-UI style classes from different components conflict when served statically
问题：应用于 class 由 Material-UI / JSS 生成的名称的样式在组件 re-rendered.
时不正确地更改
设置：我正在提供一个使用 Material-UI jss 样式和 Rails 后端的 React 应用程序（使用 create-react-app 构建）。我不确定 Rails 部分的相关性如何，因为当我直接在本地计算机上打开 build/index.html 文件时会发生同样的事情——Rails 后端处理根请求提供呈现的静态客户端文件 here。在任何一种情况下，静态构建都是使用 npm run build 创建的，它运行 react-scripts build（来自 create-react-app）。
问题示例：我有一个 <img> 元素，给定 className: {classes.logo}。构建时，classes.logo 是 "jss3"，它采用以下正确的 CSS：
.jss3 {
height: 50px;
position: relative;
// [...more]
}
看起来像这样 -- <img> 组件在应用程序的左上角 header。
I "continue as guest"，并渲染了新组件。但请注意徽标图像，它现在有了新的样式：
发生了什么事？ <img> 组件现在显示以下样式：
.jss3 {
height: 2em;
padding: 7px;
overflow: scroll;
position: relative;
}
此 css 来自完全不同的样式 object 来自不同的组件：
// FileEntry.js
fileEntry: {
position: 'relative',
padding: '7px',
height: '2em',
overflow: 'scroll',
},
根据日志，我确定 AppHeader.js 中的 classes.logo 和 FileList.js 中的 classes.fileEntry 都被命名为 "jss3"。所以这就解释了样式更改的原因——呈现了一个新组件 (<FileEntry) 并且它覆盖了 "jss3" class 样式。
所以目前的根本问题是：为什么两个样式元素的名称冲突 "jss3"？如何使用静态 front-end 应用程序避免这种情况？ （当我按照上面博客 post 中的说明部署到 heroku 时，也会出现此问题。）我喜欢一个仍然允许我从一个 [=] 托管客户端和 back-end 的答案75=] 实例，就像我在这里所做的那样，但如果另一个部署设置是最佳答案，那么我很想了解如何+为什么。
此问题与使用两个不同版本的 class 名称生成器有关。有很多方法可以做到这一点；在我的例子中，我将 material-ui/core/styles#withStyles 的旧版本与更新的 material-ui/styles#makeStyles 混合在一起，因为我正在重构 class 组件以使用挂钩。通过删除旧 core/styles#withStyles 的使用，我解决了这个问题。
发生的情况是两个样式 class 名称生成器互不了解，并使用简单索引创建 class 名称（例如 jss3）。至少，他们为生产构建这样做，似乎在开发构建中使用了更冗长的 component-name-based class 名称，这解释了为什么我只在静态托管时看到它。
由于 FileEntry 组件直到登录才呈现，所以 jss3 class 名称直到登录操作后才由第二个 class 名称生成器生成，在这一点上，jss3 class 被赋予了更新的样式，并且浏览器将其应用于现有的 jss3 元素，因为它是打算做的。
一些解决方案涉及强制两者使用相同的 Jss 提供程序，但首先不使用 class 名称生成器的独立调用是一个更彻底和 well-supported 的解决方案。
此处记录了类似的问题：
我在迁移到新的 material-ui 版本 (5) 后遇到了这个问题。
如果您遇到同样的问题，这应该对您有所帮助
问题：应用于 class 由 Material-UI / JSS 生成的名称的样式在组件 re-rendered.
时不正确地更改设置：我正在提供一个使用 Material-UI jss 样式和 Rails 后端的 React 应用程序（使用 create-react-app 构建）。我不确定 Rails 部分的相关性如何，因为当我直接在本地计算机上打开 build/index.html 文件时会发生同样的事情——Rails 后端处理根请求提供呈现的静态客户端文件 here。在任何一种情况下，静态构建都是使用 npm run build 创建的，它运行 react-scripts build（来自 create-react-app）。
问题示例：我有一个 <img> 元素，给定 className: {classes.logo}。构建时，classes.logo 是 "jss3"，它采用以下正确的 CSS：
.jss3 {
height: 50px;
position: relative;
// [...more]
}
看起来像这样 -- <img> 组件在应用程序的左上角 header。
I "continue as guest"，并渲染了新组件。但请注意徽标图像，它现在有了新的样式：
发生了什么事？ <img> 组件现在显示以下样式：
.jss3 {
height: 2em;
padding: 7px;
overflow: scroll;
position: relative;
}
此 css 来自完全不同的样式 object 来自不同的组件：
// FileEntry.js
fileEntry: {
position: 'relative',
padding: '7px',
height: '2em',
overflow: 'scroll',
},
根据日志，我确定 AppHeader.js 中的 classes.logo 和 FileList.js 中的 classes.fileEntry 都被命名为 "jss3"。所以这就解释了样式更改的原因——呈现了一个新组件 (<FileEntry) 并且它覆盖了 "jss3" class 样式。
所以目前的根本问题是：为什么两个样式元素的名称冲突 "jss3"？如何使用静态 front-end 应用程序避免这种情况？ （当我按照上面博客 post 中的说明部署到 heroku 时，也会出现此问题。）我喜欢一个仍然允许我从一个 [=] 托管客户端和 back-end 的答案75=] 实例，就像我在这里所做的那样，但如果另一个部署设置是最佳答案，那么我很想了解如何+为什么。
此问题与使用两个不同版本的 class 名称生成器有关。有很多方法可以做到这一点；在我的例子中，我将 material-ui/core/styles#withStyles 的旧版本与更新的 material-ui/styles#makeStyles 混合在一起，因为我正在重构 class 组件以使用挂钩。通过删除旧 core/styles#withStyles 的使用，我解决了这个问题。
发生的情况是两个样式 class 名称生成器互不了解，并使用简单索引创建 class 名称（例如 jss3）。至少，他们为生产构建这样做，似乎在开发构建中使用了更冗长的 component-name-based class 名称，这解释了为什么我只在静态托管时看到它。
由于 FileEntry 组件直到登录才呈现，所以 jss3 class 名称直到登录操作后才由第二个 class 名称生成器生成，在这一点上，jss3 class 被赋予了更新的样式，并且浏览器将其应用于现有的 jss3 元素，因为它是打算做的。
一些解决方案涉及强制两者使用相同的 Jss 提供程序，但首先不使用 class 名称生成器的独立调用是一个更彻底和 well-supported 的解决方案。
此处记录了类似的问题：
我在迁移到新的 material-ui 版本 (5) 后遇到了这个问题。
如果您遇到同样的问题，这应该对您有所帮助