如何将Material UI TextField标签置于边框右上角以适配阿拉伯语RTL场景

修正后样式代码 #

const useStyles = makeStyles((theme) => ({
    formControl: {
        margin: theme.spacing(3),
    },
    labelRoot: {
        right: "20px",
        left: "auto !important",
        textAlign: "right",
    },
    shrink: {
        transformOrigin: "top right !important",
        transform: "translate(0, -6px) scale(0.75) !important",
    },
    inputRoot: {
        paddingRight: "14px",
        paddingLeft: "14px",
        "& .MuiOutlinedInput-notchedOutline legend": {
            float: "right",
        }
    }
}));

修正后组件代码 #

<TextField
    style={{ direction: "rtl" }}
    className={classes.formControl}
    InputLabelProps={{
        classes: { root: classes.labelRoot, shrink: classes.shrink }
    }}
    InputProps={{
        classes: { root: classes.inputRoot }
    }}
    label={t("Ad Title (eg: Toyota Camry 2018 for Sale)")}
    variant="outlined"
    fullWidth
    onChange={ev => setData({
        ...data,
        title: ev.target.value
    })}
    value={data ? data.title : ''}
    required
/>

核心改动说明 #

• 删除了重复定义的formControl样式，避免原有margin配置被无效的绝对定位规则覆盖
• 给标签根样式新增left: auto !important规则，覆盖Material UI默认的left定位逻辑，保证右侧定位生效，同时添加右对齐规则适配阿拉伯语文本展示
• 调整标签收缩状态的变换规则，取消多余的横向偏移，仅保留和LTR方向对称的上移缩小效果，固定变换原点为右上角
• 新增输入框根样式，调整边框缺口对应的legend元素为右浮动，解决边框缺口和右侧标签错位的问题，同时调整内边距避免输入的RTL文本和边框重叠

如果你的项目需要全局适配RTL语言，可直接在Material UI主题配置中设置direction: 'rtl'，配合jss-rtl插件即可自动适配所有组件的方向，无需单个组件手动覆写样式。

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