如何在Material UI @next React的Typography中为不同属性设置不同字体？

嘿，这个问题我太熟悉了！要给caption单独设置不同字体，其实分几种常见场景来处理，我给你捋得明明白白：

纯CSS场景（无框架） #

如果是直接写HTML+CSS，不管你用的是原生<caption>标签还是自定义的caption类，直接针对选择器写样式就行：

• 针对原生<caption>标签：

caption {
  font-family: "你的标题字体", sans-serif;
  /* 还能顺便调整其他排版属性 */
  font-size: 0.8rem;
  font-weight: 300;
  color: #666;
}

• 针对自定义的.caption类：

.caption {
  font-family: "特殊字体", serif;
  /* 按需添加字号、字间距等属性 */
  letter-spacing: 0.05em;
}

Material UI（React）场景 #

既然提到了Typography属性，大概率是在用Material UI这类组件库。给variant="caption"的Typography单独改字体，有三种常用方法：

1. 直接用sx属性快速覆盖（适合单个组件的临时修改）：

<Typography variant="caption" sx={{ fontFamily: "你的Caption字体, sans-serif" }}>
  这是你的caption文本内容
</Typography>

2. 全局修改主题（适合所有caption统一改样式）：
   在创建主题的时候，直接修改Typography里的caption变体配置：

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

const customTheme = createTheme({
  typography: {
    caption: {
      fontFamily: "自定义Caption字体, serif",
      fontSize: "0.75rem",
      fontWeight: 400,
      color: #888
    },
  },
});

// 记得在根组件用ThemeProvider包裹整个应用
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 你的应用内容 */}
      <Typography variant="caption">全局统一样式的caption</Typography>
    </ThemeProvider>
  );
}

3. 自定义样式类复用（适合需要多处复用的自定义caption样式）：

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  customCaption: {
    fontFamily: "专属字体, sans-serif",
    fontStyle: "italic"
  },
});

function MyComponent() {
  const classes = useStyles();
  return (
    <Typography variant="caption" className={classes.customCaption}>
      复用自定义样式的caption
    </Typography>
  );
}

Tailwind CSS场景 #

如果是用Tailwind，直接给元素加对应的字体类和排版类就行：

<p class="font-caption text-xs text-gray-600">这是你的caption文本</p>

（注：如果是自定义字体，记得先在tailwind.config.js里配置font-caption对应的字体）

核心思路其实很简单：找到caption对应的元素/组件变体，单独覆盖font-family属性，根据你用的技术栈选对应的方法就好啦～

内容的提问来源于stack exchange，提问作者Ben Ahlander