在 React + TypeScript 中向 MUI 按钮添加自定义字体

Question

我正在创建我的网站，并尝试将 fonts 添加到文本中。 我尝试将谷歌字体的链接添加到我的 Index.HTML 文件的头部标签，并将字体系列添加到 index.css。 在此之后，我尝试在我的网站的样式表中创建 css class 并在 class 中添加字体。 然后在mui按钮组件中调用class到主网页文件。 我不确定为什么没有将特定字体应用于文本。 如果有人可以提供帮助，那就太好了。

<Stack direction='row' spacing={1}>
      <div className='App-logo'>
        <img src={Archit} alt='' height={40} width={40} />


      </div>

      <Button className='button' sx={{ color: 'bisque' }}>=
        HOME
      </Button>

      <Divider className='button' sx={{ color: 'beige' }}>|</Divider>

      <Button sx={{ color: 'bisque', font: 'Neucha' }}>
        About
      </Button>

      <Divider className='button' sx={{ color: 'bisque' }}>|</Divider>

      <Button className='button' sx={{ color: 'bisque' }}>
        Projects
      </Button>

      <Divider className='button' sx={{ color: 'bisque' }}>|</Divider>

      <Button className='button' sx={{ color: 'bisque' }}>
        Activities
      </Button>

      <Divider className='button' sx={{ color: 'bisque' }}>|</Divider>

      <Button className='button' sx={{ color: 'bisque' }}>
        Gallery
      </Button>

      <Divider className='button' sx={{ color: 'bisque' }}>|</Divider>

      <Button className='button' sx={{ color: 'bisque' }}>
        Contact
      </Button>
    </Stack>

在分隔器 mui 组件上应用类名时，将应用样式但不适用于按钮元素。

我还附上了 index.html 文件和 index.css 文件以及我网站的样式表的屏幕截图。 如果可以的话，请看一下并提供帮助。

应用程序.css

索引.html

索引.css

Answer 1

使用主题的一种方式，你可以这样做。

在package.json中安装您的字体，您应该会看到类似"typeface-montserrat": "^1.1.13",然后创建一个主题文件（将字体“Monserat”替换为您的字体系列）：

主题.jsx

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

export const theme = createTheme({
  typography: {
    // fontFamily: ['Montserrat', 'serif'].join(','), Uncomment if you want all the typography to inherit this font.
    button: {
      fontFamily: ['Montserrat', 'serif'].join(','),
      fontSize: 16,
      fontWeight: 400,
    },
  }
});

在您的 App.jsx 文件中：

应用程序.jsx

import { ThemeProvider } from '@mui/material/styles';
...
const App = () => (
  <ThemeProvider theme={theme}>          
    <Button>Test button</Button>            
  </ThemeProvider>
);

有了上面所有的 Buttons 将继承在选定的字体系列中（不要忘记替换为您要使用的字体系列）。 如果你希望所有的排版都继承这个字体系列，那么用我的评论取消它上面的行的注释。 让我知道它是否有帮助。