如何在Material UI 5的TextField中实现部分文本加粗？

原生TextField基于<input>或<textarea>，属于纯文本输入控件，无法直接渲染部分文本加粗的样式。要实现需求，需要改用支持富文本的输入组件，以下是两种可行方案：

方案一：自定义可编辑容器（基于MUI样式） #

通过contenteditable的<div>模拟输入框，结合MUI的TextField和Input组件保持原有样式，同时格式化括号内的内容为加粗：

1. 编写文本格式化函数，将括号包裹的内容用<strong>标签包裹：

const formatTextWithBoldBrackets = (text) => {
  // 匹配所有括号包裹的内容，替换为加粗格式
  return text.replace(/(\(.*?\))/g, '<strong>$1</strong>');
};

2. 自定义富文本输入组件：

import { TextField, Input } from '@mui/material';

const CustomRichTextField = ({ defaultValue, onChange, ...props }) => {
  const handleInput = (e) => {
    // 获取编辑后的HTML内容，可根据需求转为纯文本或保留格式
    onChange(e.currentTarget.innerHTML);
  };

  return (
    <TextField
      {...props}
      inputProps={{ style: { whiteSpace: 'pre-wrap' } }}
    >
      <Input
        component="div"
        contentEditable
        dangerouslySetInnerHTML={{
          __html: formatTextWithBoldBrackets(defaultValue)
        }}
        onInput={handleInput}
        onFocus={(e) => {
          // 聚焦时选中全部内容，与原需求一致
          const selection = window.getSelection();
          const range = document.createRange();
          range.selectNodeContents(e.target);
          selection.removeAllRanges();
          selection.addRange(range);
        }}
      />
    </TextField>
  );
};

3. 使用自定义组件：

<CustomRichTextField
  autoFocus={props.autoFocus}
  fullWidth
  defaultValue={props.defaultValue}
  onChange={handleChange}
/>

方案二：使用MUI X富文本编辑器 #

借助MUI官方扩展库@mui/x-rich-text-editor实现成熟的富文本输入，无需手动处理contenteditable的边缘问题：

1. 安装依赖：

npm install @mui/x-rich-text-editor @mui/material @emotion/react @emotion/styled

2. 编写转换函数，将原始文本转为编辑器支持的格式：

const convertToEditorValue = (text) => {
  // 将文本按括号内容拆分，分别处理为普通文本或加粗文本
  return text.split(/(\(.*?\))/).map(part => {
    if (part.startsWith('(') && part.endsWith(')')) {
      return { type: 'strong', children: [{ text: part }] };
    }
    return { text: part };
  });
};

3. 使用富文本编辑器组件：

import { RichTextEditor, Toolbar } from '@mui/x-rich-text-editor';

const MyRichTextField = ({ defaultValue, onChange, ...props }) => {
  const handleChange = (value) => {
    // 根据需求处理编辑器输出的内容，可转为纯文本或保留富文本格式
    onChange(value);
  };

  return (
    <RichTextEditor
      {...props}
      defaultValue={convertToEditorValue(defaultValue)}
      onChange={handleChange}
    >
      <Toolbar />
    </RichTextEditor>
  );
};

注意事项 #

• 方案一需要自行处理contenteditable的边缘情况（如粘贴内容格式化、光标定位等），适合轻量场景；
• 方案二更稳定，功能更完善，但需要额外引入依赖；
• 原生TextField无法实现该需求，因为它仅支持纯文本输入。

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