Question

我正在努力学习材料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。

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

Answer 1

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

这是代码

＆＃13;

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

＆＃13;

<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 "}/>

＆＃13;

Answer 2

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

在TextField上

inputProps={{
  style: {fontSize: 15} 
}}

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

Answer 3

<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;

Answer 4

尝试使用道具inputStyle

inputStyle - ＆gt;覆盖TextField输入的内联样式元件。当multiLine为false时：定义输入的样式元件。当multiLine为true时：定义容器的样式 textarea。

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

Answer 5

这是我要在用户与TextField组件进行交互之前（标签）和之后（输入文本）更改文本大小的操作

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

Answer 6

<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;
}

Answer 7

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

<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
/>

Answer 8

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

<Textfield className="custom-input" />

然后在你的胡言乱语中写下：

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

  fieldset { /* settings like border-radius */ }

  input {
    font-size: 1.2rem;
  }
}

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

8 个答案: