问材料文字字段标签不可复制？
EN

Stack Overflow用户

提问于 2022-07-27 13:40:12

回答 2查看 113关注 0票数 0

我正在使用MUI的Text组件，发现实际上没有复制标签内容的方法。有办法复制标签吗？

参见这里的演示：https://codesandbox.io/s/4ou0l7?file=/demo.tsx

谢谢

material-ui

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-07-29 04:14:45

这是因为material正在使用CSS禁用标签选择。

您可以通过几种方式重新启用它。您可以使用材料UI主题覆盖功能为特定字段或跨所有字段启用它。

为了使只对字段启用标签选择，您必须向您的TextField：InputLabelProps={{ sx: { userSelect: "text" } }}传递一个附加的支柱。

在这里，我为您提供了第二种方法，用于所有文本字段

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

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: {
          userSelect: "text"
        }
      }
    }
  }
});

const StateTextFields = () => {
  const [name, setName] = React.useState("Cat in the Hat");
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  return (
    <Box
      component="form"
      sx={{
        "& > :not(style)": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
      <TextField
        id="outlined-name"
        label="Name"
        value={name}
        onChange={handleChange}
      />
      <TextField
        id="outlined-uncontrolled"
        label="Uncontrolled"
        defaultValue="foo"
      />
    </Box>
  );
};

export default () => (
  <ThemeProvider theme={theme}>
    <StateTextFields />
  </ThemeProvider>
);

当然，您可以将这个ThemeProvider解压缩到一个单独的文件中，并与它一起包装整个项目，而不仅仅是这个文件。它只是结合了一个例子。

票数 1

Stack Overflow用户

发布于 2022-07-28 03:22:37

我找到了一种可以使用helperText完成这一任务的方法，而我的解决方案更像是一次黑客攻击。我正在使用helperText并将其定位到过去的标签位置，给它一个背景，并使用z-index将其置于最前面。此外，您也可以选择使用label，或者使用占位符替换它，这取决于您对动画是否满意。

这是一个基于您的代码的码箱，以防您需要它。

<TextField
    id="outlined-name"
    label="Name"
    // placeholder="Name"
    value={name}
    onChange={handleChange}
    helperText="Name"
    sx={{
      "& .MuiFormHelperText-root": {
        top: "-11px",
        position: "absolute",
        zIndex: "1",
        background: "white",
        padding: "0 4px",
      }
    }}
  />