文章/答案/技术大牛

发布

社区首页 >问答首页 >在排版mui中添加自定义变体

问在排版mui中添加自定义变体
EN

Stack Overflow用户

提问于 2021-11-26 06:27:58

回答 1查看 1.4K关注 0票数 0

我正在尝试为我的类型记录下一个项目实现我自己的排版。我无法配置我的代码，因此它是不工作的，有人可以帮助或指导我如何介绍我自己的排版。

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主题配置文件中的导入。

material-ui

next.js

javascript

reactjs

typescript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-26 06:39:56

我认为您遗漏了您编写的字体覆盖的导入。

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

import { typography } from "./typography";

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70120329

复制

相似问题

问在排版mui中添加自定义变体
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在排版mui中添加自定义变体EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在排版mui中添加自定义变体
EN