如何更改材质 ui TextField 的标签大小？

Posted 2023-02-22

【中文标题】如何更改材质 ui TextField 的标签大小？

【英文标题】：How can I change the label size of a material ui TextField?

【发布时间】：2019-06-28 17:40:11

【问题描述】：

我有一个如下定义的 TextField：

<TextField
  id="standard-with-placeholder"
  label="First Name"
  className=classes.textField
  margin="normal"
/>

它看起来像这样：

但我希望它看起来像这样：

“名字”文本较大。如何调整标签文字大小？目前我的样式对象是空的。我认为这应该是 CSS 应该去的地方，但我不确定标签文本的 CSS 会是什么样子。

谢谢

【问题讨论】：

您确定不是placeholder 应该更改样式吗？我看到了一个标签道具，但你能告诉我们什么是 html 渲染吗

【参考方案1】：

这是一个如何在 Material-UI 的 v4 中修改标签字体大小的示例（v5 示例进一步向下）。此示例还修改了输入的字体大小，假设您希望这些大小保持同步，但您可以在沙箱中进行尝试以查看更改其中一个或另一个的效果。

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import  withStyles  from "@material-ui/core/styles";

const styles = 
  inputRoot: 
    fontSize: 30
  ,
  labelRoot: 
    fontSize: 30,
    color: "red",
    "&$labelFocused": 
      color: "purple"
    
  ,
  labelFocused: 
;
function App( classes ) 
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="First Name"
        InputProps= classes:  root: classes.inputRoot  
        InputLabelProps=
          classes: 
            root: classes.labelRoot,
            focused: classes.labelFocused
          
        
        margin="normal"
      />
    </div>
  );

const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

以下是 Material-UI v5 的等效示例，使用 styled 代替 withStyles：

import React from "react";
import ReactDOM from "react-dom";

import MuiTextField from "@material-ui/core/TextField";
import  inputClasses  from "@material-ui/core/Input";
import  inputLabelClasses  from "@material-ui/core/InputLabel";
import  styled  from "@material-ui/core/styles";

const TextField = styled(MuiTextField)(`
  .$inputClasses.root 
    font-size: 30px;
  
  .$inputLabelClasses.root 
    font-size: 30px;
    color: red;
    &.$inputLabelClasses.focused 
      color: purple;
    
  
`);
function App() 
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="First Name"
        margin="normal"
        variant="standard"
      />
    </div>
  );

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

以下是文档的相关部分：

https://material-ui.com/api/text-field/ https://material-ui.com/api/input/ https://material-ui.com/api/input-label/ https://material-ui.com/api/form-label/

【讨论】：

这似乎没有任何作用。我认为项目中使用的自定义引导版本中的 CSS 可能会覆盖它。像这样在 javascript 中定义 CSS 时如何添加 !important？

您关于“！important”的问题已在here 得到解答。我会警告说，如果您正在与大量渗入的全局样式作斗争，您可能会遇到很多烦人的问题，试图让 Material-UI 组件看起来正确。