如何修改MUI组件库TextField组件的label transform变换样式

存在的问题 #

1. 变换属性配置错误：transform: translate(-5, -5px) scale(0) 中第一个位移值缺少单位，且scale(0)会让label完全消失，完全不符合“移动到右上角”的预期效果。
2. 变换原点设置不合理：transformOrigin: "center" 以标签中心为变换基准，无法实现对齐右上角的效果。
3. 缺少边框透明相关的样式规则：现有代码没有覆盖TextField默认的边框样式，无法实现边框透明的需求。
4. 状态覆盖不全：仅配置了Mui-focused状态的label样式，没有覆盖输入框有内容时的MuiInputLabel-shrink状态，输入内容后label样式会回退。
5. 依赖版本混用：同时引入了v5版本的@mui/material和旧版的@material-ui/core，二者样式系统存在兼容风险。

调整方案 #

修改样式规则，修正变换参数，补充边框透明配置，同时适配focus和有值两种状态的label效果，调整后的完整代码如下：

import TextField from "@mui/material/TextField";
import { createTheme, ThemeProvider } from "@mui/material/styles";
// 若提示makeStyles不存在，可安装@mui/styles后引入
import { makeStyles } from "@mui/styles";

const theme = createTheme({
  direction: "rtl"
});

const useStyles = makeStyles(() => ({
  root: {
    "& .MuiOutlinedInput-root": {
      // 常态下边框透明
      "& fieldset": {
        borderColor: "transparent"
      },
      // hover、focus状态下边框也保持透明
      "&:hover fieldset, &.Mui-focused fieldset": {
        borderColor: "transparent"
      }
    },
    "& label": {
      width: "100%",
      textAlign: "right",
      // 变换原点设为右上角，适配RTL布局
      transformOrigin: "top right",
      // 同时匹配focus和输入有值的两种收缩状态
      "&.Mui-focused, &.MuiInputLabel-shrink": {
        // 位移和缩放数值可根据视觉需求微调
        transform: "translate(0, -9px) scale(0.75)",
        transformOrigin: "top right"
      }
    }
  }
}));

export default function CatalogTextBox(params) {
  const classesStyles = useStyles();

  return (
    <ThemeProvider theme={theme}>
      <div className="pt-2 col-sm" dir="rtl">
        <TextField
          className={classesStyles.root}
          type={params.type}
          id="outlined-basic"
          label={params.text}
          variant="outlined"
        />
      </div>
    </ThemeProvider>
  );
}

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