我有以下代碼，對于調色板有效，但對于排版無效，盡管它不會引發錯誤：
一步步：
- 匯入模塊
import "@mui/material/styles/createTypography";
- 宣告它并創建附加選項
declare module "@mui/material/styles/createTypography" {
interface TypographyOptions {
tab?: React.CSSProperties;
}
}
- 將選項添加到主題：
const theme = createTheme({
typography: {
h3: {
fontWeight: typographyFonts.H3,
// color: themePalette.ARCBLUE,
},
tab: {
fontFamily: "Raleway",
},
},
});
我在這里沒有收到錯誤，這是我以前做過的，但是當我構建一個組件并使用它時，我收到一個“選項卡”不存在的錯誤：
這就是我在其他組件中使用它進行樣式設定的方式
const StyledTab = styled(Tab)(() => ({
...theme.typography,
textTransform: "none",
fontWeight: "700",
fontSize: "1rem",
minWidth: 10,
marginLeft: "25px",
}));
uj5u.com熱心網友回復：
makeStyles 函式引數有一個可以使用的引數：
const useStyles = makeStyles((theme: Theme) => ({
logo: {
height: "5em",
},
tabsContainer: {
...theme.typography.tab,
marginLeft: "auto",
color: "white",
},
}));
或者（你在我寫的時候更新了代碼）：
const StyledTab = styled(Tab)((theme: Theme) => ({
...theme.typography,
textTransform: "none",
fontWeight: "700",
fontSize: "1rem",
minWidth: 10,
marginLeft: "25px",
}));
此外，請確保您的應用程式包含在：
<ThemeProvider theme={theme}>
...
</ThemeProvider>
此外，如果您使用 v5，您的覆寫應該如下所示：
declare module '@mui/material/styles' {
interface TypographyVariants {
tab: React.CSSProperties;
}
// allow configuration using `createTheme`
interface TypographyVariantsOptions {
tab?: React.CSSProperties;
}
}
// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
interface TypographyPropsVariantOverrides {
tab: true;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/525813.html
標籤：反应打字稿材料-ui