如何更改 Material-ui 中的 TextField 悬停边框效果？

Question

so in persian language the direction is rtl .

i wanna know how can i change this input to my language for the project ?

Please take a look at this Image

this is what i wanna do but i have no idea how can i change the border line on hover. I can change the label text with position: relative or absolute and move it, but when we click the input to type, idk what to do with that borderline?

how can i move that ? I Will appreciate some help.

material ui code

import * as React from "react";
import TextField from "@mui/material/TextField";

      <div style={{ margin: "10rem 5rem" }}>
        <TextField
          id="outlined-basic"
          label="متن"
          variant="outlined"
        />
      </div>

Answer 1

您需要将内部字段集文本对齐更改为“右”而不是“左”，并更改标签的变换 X 属性，也可以从左：0 更改为右：0，以移动标签的位置从左到右，有多种解决方案，只需查看文档以了解如何更改内部元素的属性。