Question

问题：重新渲染组件时，应用于Material-UI / JSS生成的类名的样式未正确更改。

设置：我正在提供一个使用Material-UI jss样式和Rails后端的React应用程序（由create-react-app构建）。我不确定Rails的相关性如何，因为当我直接在本地计算机上打开build/index.html文件时，也会发生同样的事情-Rails后端处理根请求以提供静态客户端文件，如所示{ {3}}。无论哪种情况，都是使用npm run build创建静态构建的，react-scripts build运行create-react-app（来自<img>）。

问题的示例：我有一个className: {classes.logo}元素，被赋予了classes.logo。构建后，"jss3"是.jss3 { height: 50px; position: relative; // [...more] }，它采用以下正确的CSS：

<img>

看起来像这样-<img>组件位于应用程序标题的左上方。

here

我“以客人身份继续”，并呈现了新的组件。但是请注意徽标图像，该徽标现在具有新样式：

发生了什么事？ .jss3 { height: 2em; padding: 7px; overflow: scroll; position: relative; }组件现在显示以下样式：

// FileEntry.js

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

此css来自与其他组件完全不同的样式对象：

classes.logo

从日志中，我确定AppHeader.js中的classes.fileEntry和FileList.js中的"jss3"都被命名为<FileEntry。这就解释了样式更改的原因-呈现了一个新组件（"jss3"），它重写了"jss3"类样式。

因此，目前的根本问题是：为什么两个样式元素都被赋予冲突的名称def f(subdf): ffilled = (subdf.loc[subdf['counts'] > 0, 'time'] .reindex_like(subdf) .ffill() .shift()) return subdf['time'] - ffilled df['diff'] = (df.groupby(['detector_id', 'channel_id']) .apply(f) .sort_index(level=-1) .values) time detector_id channel_id counts diff expected 0 1 0 1 0 NaN NaN 1 2 0 1 1 NaN NaN 2 3 0 1 0 1.0 1.0 3 4 0 0 1 NaN NaN 4 5 0 1 0 3.0 3.0 5 6 0 1 1 4.0 4.0 6 7 1 1 0 NaN NaN？如何使用静态前端应用程序避免这种情况？（当我按照上面的博客文章中的说明部署到heroku时，也会发生此问题。）我很想得到一个答案，该答案仍然允许我在一个运行的实例中同时托管客户端和后端，但是如果其他部署设置是最佳答案，那么我很想学习+为什么。

Answer 1

该问题与使用两个不同版本的类名生成器有关。有很多方法可以做到这一点；在我的案例中，我在重构类组件以使用挂钩时将material-ui/core/styles#withStyles的旧版本与更新的material-ui/styles#makeStyles混合在一起。通过删除旧版core/styles#withStyles的使用，我解决了该问题。

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

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

一些解决方法涉及强制双方都使用相同的Jss Provider，但首先不使用类名生成器的独立调用，这是一种更彻底且得到良好支持的解决方案。

类似的问题记录在这里：

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

1 个答案: