无法更改材质ui中文本字段的字体大小

Posted 2023-02-22

【中文标题】无法更改材质ui中文本字段的字体大小

【英文标题】：Cannot change font size of text field in material ui

【发布时间】：2018-10-23 11:53:48

【问题描述】：

我正在尝试学习材料 ui。我想放大页面上的文本字段。但是，我在字段中嵌入的样式会更改高度、宽度和除大小之外的其他属性。以下是我的代码：

const styles = 
container: 
    display: 'flex',
    flexWrap: 'wrap',
,
textField: 
    // marginLeft: theme.spacing.unit,
    // marginRight: theme.spacing.unit,
    width: 300,
    margin: 100,
    fontSize: 50 //??? Doesnt work

以下是无状态组件（React）：

const Searchbox = (props) => 

    const  classes  = props;

    return (
        <TextField
            onKeyDown=props.onKeyDown
            id="with-placeholder"
            label="Add id"
            placeholder="id"
            className=classes.textField
            margin="normal"
            autoFocus=true
            helperText="Add an existing id or select "
        />
    );
;

export default withStyles(styles)(Searchbox);

我完全理解没有火箭科学，因为它是一种在 JS 中应用样式的简单 CSS 方法。

但是，我无法覆盖文本字段的基本字体大小。任何帮助将不胜感激

【问题讨论】：

你可以试试 fontSize: "50px"

那行不通！ :(

接下来你要试试material ui吗？？

【参考方案1】：

正如页面TextField API 中提到的，将样式应用于将样式应用于输入元素的 InputProps

这里是代码

const styles = 
container: 
    display: 'flex',
    flexWrap: 'wrap',
,
textField: 
    width: 300,
    margin: 100,
,
//style for font size
resize:
  fontSize:50
,

<TextField
          id="with-placeholder"
          label="Add id"
          placeholder="id"
          InputProps=
            classes: 
              input: classes.resize,
            ,
          
          className=classes.textField
          margin="normal"
        autoFocus=true
        helperText="Add an existing id or select "/>

【讨论】：

如果我错了，请纠正我，属性“input”被设置为对象“classes.resize”？我正在使用打字稿，它似乎告诉我输入需要一个字符串？

是大写的 InputProps

这应该是input: styles.resize 和classNam=styles.textField。您没有正确调用变量，这有点令人沮丧。

如果使用了myComponent = withStyles(styles)( ( props ) => ... )，

classes.resize 是有意义的。然后classes 可从const classes = props 获得。 `

【参考方案2】：

更改输入标签和输入文本的字体大小最直接的方法是使用内联样式：

<TextField
  label="input label name here"
  margin="normal"
  inputProps=style: fontSize: 40 // font size of input text
  InputLabelProps=style: fontSize: 40 // font size of input label
/>

【讨论】：

但是如果使用外框TextField，外框会覆盖一些标签文字

【参考方案3】：

我使用的是 3.8.1 版本，我可能有一个更直接的解决方案。

开启TextField

inputProps=
  style: fontSize: 15 

但是，这也可能涉及调整 lineHeight 以使其看起来更好。

【参考方案4】：

在用户与 TextField 组件交互之前（标签）和之后（输入文本），我必须这样做来更改文本的大小

<TextField
  id="MyTextField"
  InputProps=
    classes: 
      input: classes.formTextInput
    
  
  InputLabelProps=
    classes: 
      root: classes.formTextLabel
    
  
/>

【参考方案5】：

<TextField inputStyle=styles.textField />

这里是完整的代码：

import React from 'react';
import TextField from 'material-ui/TextField';

const styles = 
    textField: 
    fontSize: 50, //works!
 


const Searchbox = (props) => 
return (
    <TextField
        onKeyDown=props.onKeyDown
        id="with-placeholder"
        label="Add id"
        placeholder="id"
        inputStyle=styles.textField
        margin="normal"
        autoFocus=true
        helperText="Add an existing id or select "
    />
    );
;
export default Searchbox;

【参考方案6】：

尝试使用道具inputStyle

inputStyle --> 覆盖 TextField 输入的内联样式 元素。当 multiLine 为 false 时：定义输入的样式 元素。当 multiLine 为 true 时：定义容器的样式 文本区域。

    <TextField
      inputStyle= fontSize: "50px" 
      hintText="Hint Text"
    />

【讨论】：

请解释投反对票的原因。这将帮助我改进答案

inputStyle 不是 TextField 的道具：material-ui.com/api/text-field。 （或者不再）

【参考方案7】：

<TextField
    type="text"
    className=classes.financing_input
    placeholder=this.props.CustomerInfoData.phone
    name="phone"
    id="fixInputSize" //Works 
    onChange=this.handleChange
/>

//in your css file
#fixInputSize
  font-family: Roboto;
  font-size: 11px;

【参考方案8】：

如果您使用 sass 进行样式设置，您也可以这样做。

<Textfield className="custom-input" />

然后在你的 sass 中写：

.custom-input 
  width: ....px;

  fieldset  /* settings like border-radius */ 

  input 
    font-size: 1.2rem;