更改文本字段 label position

Question

我正在尝试更改 TextFiled 中 label 的 position，而不会将我的整个项目配置为 rlt，就像我在其他问题上看到的那样。 我只想改变它的风格，并且只针对这个组件。 我在这里尝试了很多示例，但发现没有一个有效或适合我的需要。 我成功地将 label 文本定位到右侧，但边框中的空间仍然位于左侧，如此处所示

这是我写的代码：

  const useStyles = makeStyles((theme) => ({
    labelRoot: {
      right: '10px',
    },
    shrink: {
      transformOrigin: 'top right',
      transform: 'translateX(50px)',
    },
  }));
  const classes = useStyles();


<TextField 
     label='שם לקוח'
     InputLabelProps={{classes: {root: classes.labelRoot, shrink: classes.shrink},}}/>

编辑：我尝试使用 Steve Gomez 的建议，但它仍然没有用：

import React from 'react';
import {create} from 'jss';
import rtl from 'jss-rtl';
import {createTheme, ThemeProvider} from '@mui/material/styles';
import {jssPreset, StylesProvider} from '@mui/styles';

// Configure JSS
const jss = create({plugins: [...jssPreset().plugins, rtl()]});

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

function RTL(props) {
  return (
    <StylesProvider jss={jss}>
      <ThemeProvider theme={theme}>
        <div dir='rtl'>{props.children}</div>
      </ThemeProvider>
    </StylesProvider>
  );
}

export default RTL;

....

<RTL>code here</RTL>

Answer 1

可能有一种更简单的方法可以做到这一点，并且对于您的特定情况来说，果汁可能不值得挤压，但您可以结合使用MUI 的从右到左指南及其嵌套主题功能来支持此用例。

我知道你说你只是“想改变它的风格”，但我想我会提供这个作为替代选项，以防你收到的关于这个问题的其他答案都不令人满意。

简而言之，要使用此方法，您需要：

1. 安装jss-rtl
2. 创建一个嵌套主题以使用direction: "rtl"包装 RTL 字段。
3. 并创建/配置StylesProvider和ThemeProvider的实例（如嵌套文档中所述——注意：这些实例将嵌套在您已用于应用程序的现有ThemeProvider中。 ）。
4. 将您的组件包装在 RTL 元素中，例如<div dir="rtl">
5. 像Textfield一样使用新创建的 RTL 文本字段。

代码摘录：

import rtl from "jss-rtl";
import { StylesProvider, jssPreset } from "@material-ui/core/styles";

const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

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

...

<StylesProvider jss={jss}>
  <ThemeProvider theme={theme}>
    <div dir="rtl">
      <TextField
        label="שם לקוח"
        variant="outlined"
        InputLabelProps={{ shrink: true }}
        fullWidth
      />
    </div>
  </ThemeProvider>
</StylesProvider>

所有这些都应该产生以下效果：

工作代码沙盒： https://codesandbox.io/s/material-demo-forked-61uc5i?file=/demo.js

（仅供参考，我假设您使用的是 MUI 4，因为您使用了makeStyles() ，但这也可以通过 MUI 5 来完成。）

使用可重用组件更新答案：

要回答后续问题，使其成为不需要额外样式的可重用组件，您可以将其创建为包装器组件，可以按如下方式使用：

export const RTLWrapper = ({ children }) => (
  <StylesProvider jss={jss}>
    <ThemeProvider theme={theme}>
      <div dir="rtl">{children}</div>
    </ThemeProvider>
  </StylesProvider>
);

...

<RTLWrapper>
  <TextField
    label="שם לקוח"
    variant="outlined"
    InputLabelProps={{ shrink: true }}
    fullWidth
  />
</RTLWrapper>

...

<RTLWrapper>
  <FormControl component="fieldset">
    <FormLabel component="legend">RTL Options</FormLabel>
      <FormGroup>
        <FormControlLabel
          control={<Checkbox name="gilad" />}
          label="Gilad Gray"
        />
        <FormControlLabel
          control={<Checkbox name="jason" />}
          label="Jason Killian"
        />
        <FormControlLabel
          control={<Checkbox name="antoine" />}
          label="Antoine Llorca"
        />
      </FormGroup>
    <FormHelperText>Helper Text</FormHelperText>
  </FormControl>
</RTLWrapper>

这会产生：

工作代码沙盒： https://codesandbox.io/s/material-demo-forked-8gvpx5?file=/demo.js:2678-3447

Answer 2

如果您正在寻找 go 的快速答案：（也适用于较旧的 MUI 版本）

<TextField
  label="שם לקוח"
  sx={{
    "& label": {
      left: "unset",
      right: "1.75rem",
      transformOrigin: "right",
      fontSize: "0.8rem",
    },
    "& legend": {
      textAlign: "right",
      fontSize: "0.6rem",
    },
  }}
/>

完整说明

就像几乎所有其他 Material-UI 组件一样， TextField由一些不同的部分组成。 您找到并更改了label ，但负责边框空间的部分称为legend 。 你也需要改变它。

方法

现在我们应该考虑要采用哪种方法来实现这些变化。

1. 要全局更改项目中组件的所有实例，请使用theme 。
2. 要仅更改一个特定组件，请使用sx道具。 [喜欢顶部提供的快速答案]
3. 要拥有具有可重用性选项的新自定义组件，请使用MUI styled() 。

我注意到您正在使用MUI v4 。 makeStyles是旧版 function， MUI v5不再支持它。 所以我建议升级到 v5 并改用styled 。

import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";

const StyledTextField = styled(TextField)({
  "& label": {
    left: "unset",
    right: "1.75rem",
    transformOrigin: "right",
    fontSize: "0.8rem",
  },
  "& legend": {
    textAlign: "right",
    fontSize: "0.6rem",
  },
});

export default function Example() {
  return (
    <>
      <StyledTextField label="שם לקוח" />
      <StyledTextField label="component2" />
    </>
  );
}

使用前两种方法不需要将 MUI 版本升级到 5。因此，如果您因任何原因无法升级 MUI 版本，您可以放心使用它们。

Answer 3

我使用了 Steve 和 Hamed 的答案并找到了我满意的东西：

const sx = {
    '& label': {
      transformOrigin: 'right !important',
      left: 'inherit !important',
      right: '1.75rem !important',
    },
    '& legend': {
      textAlign: 'right',
    },
    '&  .MuiFormHelperText-root.Mui-error': {
      textAlign: 'right',
    },
  };

<TextField
         label='שם לקוח'
         onChange={(e) => onChangeValue('clientName', e.target.value)}
         error={error.scopeNameError !== ''}
         helperText={error.clientNameError}
         sx={sx}/>