如何为Material-UI的Input元素赋予Typography样式？

嘿，我来给你几个靠谱的方案解决这个问题——不用手动复制一堆CSS，就能让Input完美继承Typography的样式：

方案1：复用主题中的Typography样式类 #

Material-UI的主题里已经内置了各种Typography变体的样式（比如body1、h6这些），我们可以直接把这些样式应用到Input上，不用自己写重复代码：

import { makeStyles, Typography, Input, useState } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  // 直接复用主题中Typography的样式
  typoInput: {
    ...theme.typography.body1, // 这里可以换成你需要的变体，比如h5、subtitle1
    color: theme.palette.text.primary,
    // 如果不需要Input默认的下划线，加上这个
    '&:before': {
      display: 'none',
    },
  },
}));

function EditableTypography() {
  const classes = useStyles();
  const [inputValue, setInputValue] = useState('这是继承了Typography样式的可编辑文本');

  return (
    <Input
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      className={classes.typoInput}
    />
  );
}

方案2：直接让Typography变成可编辑（最省事） #

如果你不需要严格用Input组件，直接给Typography加上contentEditable属性，就能让它变成可编辑状态，完全保留原有的样式，连样式复用都省了：

import { Typography, useState } from '@material-ui/core';

function EditableTypography() {
  const [text, setText] = useState('这是可编辑的Typography，样式完全没变');

  return (
    <Typography
      variant="body1"
      contentEditable
      suppressContentEditableWarning // 去掉React的默认警告
      onBlur={(e) => setText(e.currentTarget.textContent)}
    >
      {text}
    </Typography>
  );
}

这个方法的好处是100%保留Typography的所有样式，包括你自定义的，但要注意contentEditable在复杂场景下可能有一些小坑（比如光标位置、格式处理），简单文本编辑的话完全够用。

方案3：用TextField配合样式覆盖 #

如果你需要用TextField（比如要用到表单验证、自动完成等功能），可以通过样式覆盖让它匹配Typography的样式：

import { makeStyles, TextField, useState } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  typoTextField: {
    // 应用Typography的基础样式
    ...theme.typography.subtitle1,
    // 覆盖TextField内部输入框的样式
    '& .MuiInputBase-input': {
      ...theme.typography.subtitle1,
    },
    // 去掉TextField默认的下划线
    '& .MuiInput-underline:before': {
      display: 'none',
    },
    '& .MuiInput-underline:after': {
      display: 'none',
    },
  },
}));

function EditableTypography() {
  const classes = useStyles();
  const [value, setValue] = useState('TextField也能完美匹配Typography样式');

  return (
    <TextField
      value={value}
      onChange={(e) => setValue(e.target.value)}
      className={classes.typoTextField}
      variant="standard"
    />
  );
}

为什么手动复制CSS不行？ #

Material-UI的样式是动态生成的，带有独特的类名前缀（比如MuiTypography-root），而且很多样式是基于主题变量的，手动复制很容易遗漏依赖的变量或者动态生成的规则，用上面这些方法直接复用主题样式或者组件本身的特性，会更可靠也更省心。

内容的提问来源于stack exchange，提问作者Louis Coulet