reactjs - Material-ui 图标不显示当前上下文中的主题调色板颜色

Question

没有打印正确的颜色，因为没有收到自定义主题道具，而是默认的。使用 Material-ui 版本 5。

已经使用自定义属性设置主题文件：theme.js

const darkTheme = createTheme({
  ...baseTheme,
  palette: {
    mode: 'dark',
    background: {
      default: '#0D1015',
      paper: '#0D1015'
    },
    primary: {
      main: '#EF7560'
    },
    secondary: {
      main: '#1D232E'
    },
    contrastThreshold: 3,
    tonalOffset: 0.2
  }
});

并连接到ThemeProvider喜欢这个 index.js

<StrictMode>
    <RelayEnvironmentProvider environment={RelayEnvironment}>
      <ThemeProvider theme={darkTheme}>
        <CssBaseline />
        <Suspense fallback={<SuspenseFallback header />}>
          <Router>
            <HelmetProvider>
              <ErrorBoundary FallbackComponent={ErrorFallback}>
                <App />
              </ErrorBoundary>
            </HelmetProvider>
          </Router>
        </Suspense>
      </ThemeProvider>
    </RelayEnvironmentProvider>
  </StrictMode>

主题设置为暗模式，并且按预期工作。详细问题

Sidebar.js

const Sidebar = ({children, pathname}: ISidebarProps) => {
  const theme = useTheme();
  console.log('theme =>', theme.palette.primary.main);
...

这里的主题是打印 #EF7560 所以没关系，根据需要来自上下文。

Sidebar render里面有一个Item

...js
 <List>
          <ListItem button>
            <ListItemIcon>
              <InboxIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary="Dashboard" />
          </ListItem>
...

当我通过 color="primary" 时，预计会看到带有 #EF7560 颜色的图标，而是默认的蓝色图标，如下图所示。

我不明白，为什么没有在列表项上收到正确的主题？

在此先感谢，任何帮助将不胜感激。

标签： reactjsnpmmaterial-uilerna