在 render 方法的顶部存在 material-ui 组件会影响后续组件的样式

Question

我创建了一些样式化的组件，这些组件对我来说没有正确呈现，但是在将代码传输到代码框（恰好在模板中有一个 material-ui 按钮）时组件渲染良好。这是按预期呈现的代码。然后我发现渲染顶部存在 material-ui 组件完全改变了应用的样式。（不应用通过类属性注入的样式）。这是呈现正常的代码：

 /**If I comment in either the Button or the card material-ui Component below, I have no problem seeing the 
 * styled components.  If either are present, the styling is awful.
 */
function App() {
  return (
    <div className="App">     
      <Button variant="contained" color="primary">
         Hello
      </Button>
        {/* <Card /> */}
      <MyTabs tabInformation={tabInformation} />
      <MyTabs tabInformation={tabInformation} altType={true} />
      <StyledTabs tabInformation={tabInformation} altType={false} />
    </div>
  );
}

样式组件 MyTabs 本身使用了 ConditionalThemeWrapper 的帽子戏法，withTheme HOC（它覆盖了 material-ui 样式和 withStyles HOC。虽然我不确定这与我所看到的行为有关。

如果我删除 <Card/> 或 <Button/> material-ui 组件（因此两者都不存在），通过类道具注入的样式是没有应用，但我不明白为什么。（我可以使用 !important 来提高 css 优先级，以查看样式，但我知道我不应该这样做）。

我无法在 codesandbox 中重现此内容，因为无论 button/card 组件是否存在，组件都会正确呈现。

我已将代码推送到位于 https://github.com/TaraMcC/tabsStylingError.git 的 github 存储库，注释掉 material-ui 按钮以查看选项卡更改样式。

非常感谢任何指点！

Answer 1

看起来像是 material-ui v3.9.2 中的错误。我升级到（最新的 4.8.3），无论是否存在 <Card />，渲染看起来都一样。

在 render 方法的顶部存在 material-ui 组件会影响后续组件的样式

Presence of a material-ui component at the top of the render method affects how subsequent components are styles

css

tabs

themes

reactjs

material-ui