React中Material-Ui中增加标签的问题

Posted 2023-02-22

【中文标题】React中Material-Ui中增加标签的问题

【英文标题】：Problem in Increasing Label in Material-Ui in React

【发布时间】：2021-03-17 02:08:36

【问题描述】：

我已经成功地在我的 React 应用的 TextField 中增加了 Label。 我的问题是，当它收缩时，它只是与右侧的某条线重叠。

Click Here

import React from "react";
import TextField from "@material-ui/core/TextField";
import  makeStyles  from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => (
  root: 
    "& .MuiInputLabel-shrink": 
      fontSize: "24px"
    
  
));

export default function CustomTextField( InputLabelProps = , ...props ) 
  const classes = useStyles();
  return <TextField ...props className=classes.root />;

【参考方案1】：

我鼓励您在应用自定义时始终使用 DevTools。它由<legend>元素确定的间隙大小：

元素的字体大小有一个 font-size: 0.75em 以说明 CSS 转换。

因此您可以简单地将相同的字体大小应用到其父级：

import React from "react";
import TextField from "@material-ui/core/TextField";
import  makeStyles  from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => (
  root: 
    "& .MuiInputLabel-shrink, & fieldset": 
      fontSize: "24px"
    
  
));

export default function CustomTextField( InputLabelProps = , ...props ) 
  const classes = useStyles();
  return <TextField ...props className=classes.root />;

https://codesandbox.io/s/material-ui-custom-textfield-composition-forked-g5co7?file=/src/CustomTextField.js

【讨论】：

谢谢奥利维尔。我修改了你的作品，并尝试将主题放在全球范围内。我的字段集有问题，它不起作用。你能帮我解决这个问题吗？谢谢你。 codesandbox.io/s/…

``` import MuiInputLabel from "./MuiInputLabel";导出默认 MuiTextField: root: "& fieldset": fontSize: "24px" , MuiInputLabel ; ```

标签长时有空格。检查这个pasteboard.co/JEhnV3o.jpg

【参考方案2】：

您应该使用 Shrink 作为 TextField 的道具 删除 fontSize: "24px" 让它通过 Material-UI 调整大小 确保您的 TextField 为：<TextField InputLabelProps=shrink: true .../>

如果要自定义标签大小：

    fontSize: 30,
    color: "red",
    "&$labelFocused": 
      color: "purple"
    
  ,
  labelFocused: 
;
function App( classes ) 
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="Your Label"
        InputLabelProps=
          classes: 
            root: classes.labelRoot,
            focused: classes.labelFocused
          

【讨论】：

我想放大 theTextField 的标签，因为它在收缩模式下导致它太小，这就是为什么放 fontSize: '24px'

你能完成你的答案吗？它不见了