reactjs - 静态服务时，来自不同组件的 React + Material-UI 样式类发生冲突

Question

问题:重新渲染组件时，应用于由 Material-UI/JSS 生成的类名的样式会错误地更改。

设置:我正在提供一个使用 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>组件位于应用标题的左上角。



我“继续作为客人”，并呈现新组件。但请注意 Logo 图像，它现在具有新样式:



发生了什么？ <img>组件现在显示以下样式:

.jss3 {
    height: 2em;
    padding: 7px;
    overflow: scroll;
    position: relative;
}

这个 css 来自来自不同组件的完全不同的样式对象:

// FileEntry.js

  fileEntry: {
    position: 'relative',
    padding: '7px',
    height: '2em',
    overflow: 'scroll',
  },

从日志中，我确定 classes.logo在 AppHeader.js和 classes.fileEntry来自 FileList.js被命名为 "jss3" .这就解释了为什么样式发生了变化——渲染了一个新组件( <FileEntry )并覆盖了 "jss3"类风格。

所以目前的根本问题是:为什么两个样式元素的名称冲突 "jss3" ?如何使用静态前端应用程序避免这种情况？ (当我按照上面博客文章中的说明部署到 Heroku 时，也会出现此问题。)我希望得到一个仍然允许我从单个运行实例托管客户端和后端的答案，就像我在这里所做的那样，但如果另一个部署设置是最好的答案，那么我很想了解如何+为什么。

Answer 1

该问题与使用两个不同版本的类名生成器有关。有很多方法可以做到这一点；在我的情况下，我正在混合 material-ui/core/styles#withStyles 的旧版本使用更新的 material-ui/styles#makeStyles因为我正在重构类组件以使用钩子(Hook)。通过删除旧的 core/styles#withStyles 的使用，我解决了这个问题。

发生的情况是两个样式类名生成器彼此不了解，并使用简单的索引创建类名(例如 jss3 )。至少，他们在生产构建中这样做，似乎在开发构建中使用了更详细的基于组件名称的类名，这解释了为什么我只在静态托管时才看到它。

由于FileEntry组件直到登录才呈现，jss3直到登录操作之后，第二个类名生成器才生成类名，此时 jss3类被赋予了更新的样式，并且浏览器将它应用到现有的 jss3元素，因为它应该做。

一些变通解决方案涉及强制两者使用相同的 Jss 提供程序，但首先不使用类名生成器的独立调用是一个更彻底且得到良好支持的解决方案。

此处记录了类似的问题:

https://github.com/mui-org/material-ui/issues/8223

https://github.com/mui-org/material-ui/issues/11628