在排版 mui 中添加我的自定义变体答案

【问题标题】：adding my custom variants in typography mui在排版 mui 中添加我的自定义变体
【发布时间】：2022-01-04 06:34:46
【问题描述】：

我正在尝试为我的 typescript nextjs 项目实现自己的排版。我无法为其配置我的代码，因此它不起作用，有人可以帮助或指导我如何介绍我自己的排版。

typography.ts 文件：

export const typography = {
    fontFamily: 'Recoleta, Fira Sans',
    htmlFontSize: 10,
    h7: {
      'fontFamily': 'Recoleta',
      'fontSize': '1.0rem',
      'fontWeight': 'bold',
      'fontStretch': 'normal',
      'fontStyle': 'normal',
      'lineHeight': 1.4,
    }
};

muiThemeOveride.ts：

import {createTheme} from '@mui/material/styles';
import {responsiveFontSizes} from '@mui/material/styles';

import { typography } from "./typography";

declare module '@mui/material/styles' {
  interface TypographyVariants {
    h7: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    h7?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    h7: true;
    h3: false;
  }
}
export const theme = responsiveFontSizes(createTheme({
  components: {
    // Name of the component
    MuiButton: {
      styleOverrides: {
        outlined: {
          borderColor: black,
          color: black,
          '&:hover': {
            borderColor: black,
          }
        }
      },
    },
  },
  typography
}));

index.ts

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta
          content="Generated by create next app"
          name="description" />
        <link
          href="/favicon.ico"
          rel="icon"
        />
      </Head>

      <main>
  
        <Typography variant="h7" >HELLO</Typography>
      </main>
    </div>
  )
}

export default Home

我已更新 MUI 主题配置文件中的导入。

【问题讨论】：

标签： javascript reactjs typescript material-ui next.js

【解决方案1】：

我认为您缺少您编写的排版覆盖的导入。

您需要在muiThemeOveride.ts文件中导入typography.ts文件并执行以下操作。


import { typography } from "./typography";

export const theme = responsiveFontSizes(createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        outlined: {
          borderColor: black,
          color: black,
          '&:hover': {
            borderColor: black,
          }
        }
      },
    },
  },
  typography
}));

【讨论】：

@Paladin 我说的是在muiThemeOverride.ts 文件中使用您在typography.ts 文件中编写的代码（您将在其中覆盖font-family 和其他属性）。您的 index.ts 文件不需要任何更改。唯一需要更改的文件是muiThemeOverride.ts
我建议将其托管在stackblitz/codesandbox 并分享sn-p。这是我认为现在任何人都可以提供帮助的唯一方法。
您在pages/_app.tsx 中的ThemeProvider 正在从src/theme.ts 导入theme，它不存在任何Typography 覆盖。您要么在 src/theme.ts 中添加 Typography 覆盖，要么从 src/constants/muiThemeOverride.tsx 导入主题
@Paladin，一旦成功，请投票并接受答案。
感谢您的帮助。