如何为MUI TextField值中useMemo生成的(edited)文本添加样式？

问题背景 #

我使用Material-UI（MUI）的TextField组件，将useMemo生成的messageEdited传递给其value属性。当前当hasComment为true时，messageEdited会拼接'(edited)'文本，我希望通过styled-components为该'(edited)'文本添加样式，但直接在useMemo中返回组件的尝试失败了，需要可行的实现方案。

原代码 #

import React, { useMemo } from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function BasicTextFields() {
  const hasComment = true;
  const comment = "this is a comment";

  const messageEdited = useMemo(() => {
    return hasComment ? `${comment} (edited)` : comment;
  }, [comment, hasComment]);

  return (
    <Box component="form" noValidate autoComplete="off">
      <TextField
        id="outlined-basic"
        variant="outlined"
        value={messageEdited}
        style={{ width: "350px" }}
      />
    </Box>
  );
}

styled-components定义 #

export const Edited = styled.span`
  color: red;
  margin-left: 4px;
`;

Edited.displayName = 'Edited';

尝试失败的代码 #

const messageEdited = useMemo(() => {
  const EditedText = () => <Edited>edited</Edited>;
  return comment.editedText && !editEnabled
    ? `${commentText} ${EditedText()}} `
    : commentText;
}, [comment.editedText, commentText, editEnabled]);

问题原因 #

TextField的value属性仅支持字符串/数字类型，无法接收React元素。直接拼接组件会被转换为[object Object]，导致显示异常，这是核心问题。

可行解决方案 #

根据需求场景，提供两种实现方式：

场景1：仅展示带样式文本（无需编辑功能） #

如果不需要输入框的编辑能力，直接用MUI的Typography或Box组件组合文本与样式化的'(edited)'即可：

import React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { Edited } from './your-styled-file'; // 导入styled组件

export default function BasicTextFields() {
  const hasComment = true;
  const comment = "this is a comment";

  return (
    <Box>
      <Typography variant="body1" component="div">
        {comment}
        {hasComment && <Edited>(edited)</Edited>}
      </Typography>
    </Box>
  );
}

场景2：保留输入功能，同时显示带样式的提示 #

如果需要保留TextField的编辑能力，将'(edited)'作为附加提示放在输入框内部右侧，避免干扰输入：

import React, { useState } from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import { styled } from '@mui/material/styles';
import { Edited } from './your-styled-file'; // 导入styled组件

// 自定义输入容器，用于放置输入框和提示文本
const InputWrapper = styled(Box)`
  position: relative;
  width: 350px;
`;

const StyledTextField = styled(TextField)`
  // 给输入框右侧留足够空间放提示
  input {
    padding-right: 60px;
  }
`;

const EditedLabel = styled(Edited)`
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; // 防止干扰输入操作
`;

export default function BasicTextFields() {
  const hasComment = true;
  const [comment, setComment] = useState("this is a comment");

  return (
    <Box component="form" noValidate autoComplete="off">
      <InputWrapper>
        <StyledTextField
          id="outlined-basic"
          variant="outlined"
          value={comment}
          onChange={(e) => setComment(e.target.value)}
        />
        {hasComment && <EditedLabel>(edited)</EditedLabel>}
      </InputWrapper>
    </Box>
  );
}

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