Javascript 材质UI样式不为'；不适用

我试图自定义Material UI提供的默认主题，但样式不适用。请帮忙

在My Header.js文件中，当我尝试自定义样式时，不会应用该样式

const useStyles = makeStyles((theme) => ({
  toolbarMargin: {
    ...theme.mixins.toolbar,
    marginBottom: '3em',
  },
  logo: {
    height: '7em',
  },
  tabContainer: {
    marginLeft: 'auto',
  },
  tab: {
    ...theme.typography.tab,     //The styles here is not applied.
    minWidth: 10,
    marginLeft: '25px',
  },
}));

我的App.js文件

import { ThemeProvider } from '@material-ui/core';
import React from 'react';
import Header from './ui/Header';
import theme from './ui/Theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Header /> Hello!
    </ThemeProvider>
  );
}

export default App;

import { createMuiTheme } from '@material-ui/core';

const arcBlue = '#0B7289';
const arcOrange = '#FFBA60';

const theme = createMuiTheme({
  palette: {
    common: {
      blue: `${arcBlue}`,
      orange: `${arcOrange}`,
    },
    primary: {
      main: `${arcBlue}`,
    },
    secondary: {
      main: `${arcOrange}`,
    },
    typography: {
      h3: {
        fontWeight: '300',
      },
      tab: {
        fontFamily: 'Raleway',
        textTransform: 'none',
        fontWeight: 700,
        fontSize: '1rem',
      },
    },
  },
});

export default theme;

import {
  AppBar,
  makeStyles,
  Tab,
  Tabs,
  Toolbar,
  useScrollTrigger,
} from '@material-ui/core';
import React from 'react';

import logo from '../../assets/logo.svg';

function ElevationScroll(props) {
  const { children } = props;

  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
  });

  return React.cloneElement(children, {
    elevation: trigger ? 4 : 0,
  });
}

const useStyles = makeStyles((theme) => ({
  toolbarMargin: {
    ...theme.mixins.toolbar,
    marginBottom: '3em',
  },
  logo: {
    height: '7em',
  },
  tabContainer: {
    marginLeft: 'auto',
  },
  tab: {
    ...theme.typography.tab,     //The styles here is not applied.
    minWidth: 10,
    marginLeft: '25px',
  },
}));

const Header = () => {
  const classes = useStyles();
  return (
    <>
      <ElevationScroll>
        <AppBar position="fixed">
          <Toolbar disableGutters>
            <img className={classes.logo} src={logo} alt="company-logo" />
            <Tabs className={classes.tabContainer}>
              <Tab className={classes.tab} label="Home" />
              <Tab className={classes.tab} label="Services" />
              <Tab className={classes.tab} label="The Revolution" />
              <Tab className={classes.tab} label="About Us" />
              <Tab className={classes.tab} label="Contact Us" />
            </Tabs>
          </Toolbar>
        </AppBar>
      </ElevationScroll>
      <div className={classes.toolbarMargin} />
    </>
  );
};

export default Header;

My Header.js文件

import { ThemeProvider } from '@material-ui/core';
import React from 'react';
import Header from './ui/Header';
import theme from './ui/Theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Header /> Hello!
    </ThemeProvider>
  );
}

export default App;

import { createMuiTheme } from '@material-ui/core';

const arcBlue = '#0B7289';
const arcOrange = '#FFBA60';

const theme = createMuiTheme({
  palette: {
    common: {
      blue: `${arcBlue}`,
      orange: `${arcOrange}`,
    },
    primary: {
      main: `${arcBlue}`,
    },
    secondary: {
      main: `${arcOrange}`,
    },
    typography: {
      h3: {
        fontWeight: '300',
      },
      tab: {
        fontFamily: 'Raleway',
        textTransform: 'none',
        fontWeight: 700,
        fontSize: '1rem',
      },
    },
  },
});

export default theme;

import {
  AppBar,
  makeStyles,
  Tab,
  Tabs,
  Toolbar,
  useScrollTrigger,
} from '@material-ui/core';
import React from 'react';

import logo from '../../assets/logo.svg';

function ElevationScroll(props) {
  const { children } = props;

  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
  });

  return React.cloneElement(children, {
    elevation: trigger ? 4 : 0,
  });
}

const useStyles = makeStyles((theme) => ({
  toolbarMargin: {
    ...theme.mixins.toolbar,
    marginBottom: '3em',
  },
  logo: {
    height: '7em',
  },
  tabContainer: {
    marginLeft: 'auto',
  },
  tab: {
    ...theme.typography.tab,     //The styles here is not applied.
    minWidth: 10,
    marginLeft: '25px',
  },
}));

const Header = () => {
  const classes = useStyles();
  return (
    <>
      <ElevationScroll>
        <AppBar position="fixed">
          <Toolbar disableGutters>
            <img className={classes.logo} src={logo} alt="company-logo" />
            <Tabs className={classes.tabContainer}>
              <Tab className={classes.tab} label="Home" />
              <Tab className={classes.tab} label="Services" />
              <Tab className={classes.tab} label="The Revolution" />
              <Tab className={classes.tab} label="About Us" />
              <Tab className={classes.tab} label="Contact Us" />
            </Tabs>
          </Toolbar>
        </AppBar>
      </ElevationScroll>
      <div className={classes.toolbarMargin} />
    </>
  );
};

export default Header;

导入{
阿帕巴，
制作风格，
标签，
标签，
工具栏，
使用滚动触发器，
}来自“@material ui/core”；
从“React”导入React；
从“../../assets/logo.svg”导入徽标；
功能提升滚动条（道具）{
const{children}=props；
常量触发器=使用滚动触发器({
是的，
阈值：0，
});
返回React.cloneElement（儿童、{
标高：触发器？4:0，
});
}
const useStyles=makeStyles（（主题）=>({
工具栏边距：{
…theme.mixins.toolbar，
marginBottom：“3em”，
},
标志：{
高度：“7em”，
},
选项卡容器：{
marginLeft:'自动'，
},
选项卡：{
…theme.typography.tab，//此处的样式不适用。
最小宽度：10，
marginLeft:'25px'，
},
}));
常量头=（）=>{
const classes=useStyles（）；
返回(
);
};
导出默认标题；

我发现了一个愚蠢的错误

  tab: {
    //...theme.typography.tab,  This was wrong, the styles here is not applied.
    ...theme.pallete.typography.tab,     //The styles gets applied.
    minWidth: 10,
    marginLeft: '25px',
  },

---

如果在codesandbox中添加示例代码更适合调试，那么console.log（…theme.typography.tab）的值是多少当我检查选项卡项时，只有这些样式被应用

。makeStyles-tab-4{最小宽度：10px；左边距：25px；}

我没有安装@material ui/styles。有必要安装它吗？