我正在尝试使用Material UI对主题进行排版更改。但是对象变化无效。然而,调色板有效。
我尝试对H3变体和默认字体大小进行一些更改,但是这些更改都不起作用。
但是,调色板上的颜色有效。
App.js
import React from "react";
import "./App.css";
import Header from "./components/ui/Header";
import { ThemeProvider } from "@material-ui/styles";
import theme from "./components/ui/Theme";
function App() {
return (
<ThemeProvider theme={theme}>
<Header />
</ThemeProvider>
);
}
export default App;
Header/index.jsx
import React from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import useScrollTrigger from "@mui/material/useScrollTrigger";
import Typography from "@mui/material/Typography";
function ElevationScroll(props) {
const { children, window } = props;
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
target: window ? window() : undefined,
});
return React.cloneElement(children, {
elevation: trigger ? 10 : 0,
});
}
function Header() {
return (
<ElevationScroll>
<AppBar color="primary">
<Toolbar>
<Typography variant="h3" component="h3">
Nome de teste
</Typography>
<h3>Teste</h3>
Teste
</Toolbar>
</AppBar>
</ElevationScroll>
);
}
export default Header;
Theme.js
import { createTheme } from "@material-ui/core/styles";
const arcBlue = "#0B72B9";
const arcOrange = "#FFBA60";
export default createTheme({
typography: {
fontSize: 60,
h3: {
fontWeight: 500,
},
},
palette: {
common: {
blue: `${arcBlue}`,
orange: `${arcOrange}`,
},
primary: {
main: `${arcBlue}`,
},
secondary: {
main: `${arcOrange}`,
},
},
});
如果有人能够帮忙,我将非常感激。
ThemeProvider
。请参考此链接。 - NearHuscarlimport { ThemeProvider } from "@material-ui/styles";
但是根据文档,应该改为:import { ThemeProvider } from "@material-ui/core/styles";
谢谢你的帮助! - Maximilian Kaden@mui/material/styles
。MUI v4和v5使用不同的样式库,因此v4的ThemeProvider
无法与v5的样式API一起使用。 - NearHuscarl