CODEWITHSUNDEEP
cssreactjsmaterial-ui
Omkar
Omkar

Reputation: 2423

Cannot change font size of text field in material ui

I am trying to learn material ui. I want to enlarge the text field on my page. However, the styles i embed with the field changes height, width and other properties except the size. Following is my code:

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

Following is the stateless component(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);

I totally understand there is no rocket science as its a straightforward CSS in JS approach of applying styles.

However, I cannot override the base font size for my text field. Any help will be appreciated

Upvotes: 85

Views: 158892

Answers (11)

Keshav Gera
Keshav Gera

Reputation: 11244

      inputProps={{
         tyle: {fontSize: 15} 
       }}


 <TextField
                id="outlined-basic"
                label="Last Name"
                variant="outlined"
                fullWidth
                inputProps={{
                  style: {fontSize: 15} 
                }}
                name="lastName"
                {...register("lastName", {
                  required: "Last Name is required.",
                })}
                error={Boolean(errors.lastName)}
                helperText={errors.lastName?.message}
              />

Upvotes: 0

kiranvj
kiranvj

Reputation: 34107

Use sx prop and target input base class MuiInputBase-input

 <TextField
          sx={{
            '.MuiInputBase-input': { fontSize: '1.25rem' },
          }}
/>

Upvotes: 10

Crypto-Frank
Crypto-Frank

Reputation: 360

MUI its using a theme for styling all elements in a fast way, check out this useful tool https://bareynol.github.io/mui-theme-creator/

It allows you to understand how a simple modification of theme will affect the entire app design.

Upvotes: 0

shiva
shiva

Reputation: 3941

As mentioned in the page TextField API apply styles to the InputProps which applies style to the input element.

Here is the code:

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

Upvotes: 81

Amir Gorji
Amir Gorji

Reputation: 3335

if you use sass for styling, you can also do this.

<Textfield className="custom-input" />

and then in your sass, write:

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

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

  input {
    font-size: 1.2rem;
  }
}

Upvotes: 0

AlienKevin
AlienKevin

Reputation: 3361

The most straight forward way to change the font size of both the input label and the input text is to use inline styling:

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

Edit QuizMaker

Upvotes: 92

Julio fils
Julio fils

Reputation: 75

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

Upvotes: 0

Carol Chen
Carol Chen

Reputation: 997

I'm on version 3.8.1 and I may have a slightly more straightforward solution.

On TextField 

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

However, this may also involve tweaking lineHeight to make it look nicer.

Upvotes: 17

JayJay
JayJay

Reputation: 133

Here's what I had to do to change the size of the text both before (label) and after (input text) the user interacts with the TextField component

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

Upvotes: 4

Ashh
Ashh

Reputation: 46441

Try the with the prop inputStyle

inputStyle --> Override the inline-styles of the TextField's input element. When multiLine is false: define the style of the input element. When multiLine is true: define the style of the container of the textarea.

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

Upvotes: -1

Ayorinde
Ayorinde

Reputation: 124

<TextField inputStyle={styles.textField} />

Here is the full code: 

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;

Upvotes: 2

Related Questions