How to change the font size of selected text in TextField Select from material-ui

Question

I could change the label and dropdown fontsize but have trouble setting fontsize of selected text.

                       <div className="setSize">
                            <TextField style={{ fontSize: 14, color: 'grey', fontFamily: "monospace" }}
                                size="small"
                                label="Status"
                                value={currentItem.status}
                                onChange={this.onChangeStatus}
                                variant="outlined"
                                style={{ width: 340 }}
                                InputLabelProps={{ style: { fontSize: 14, color: 'grey', fontFamily: "monospace" } }}

                                select
                            >
                                {this.state.status && this.state.status.map((item) => (
                                    <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}>
                                        {item.key}
                                    </MenuItem>
                                ))}
                            </TextField>
                        </div>

In css, I have added the below code:

                        .setSize .MuiInput-input {
                            font-size: 15px;
                            font-family: monospace;
                         }

Answer 1

You can do it using CSS

.MuiInput-input {
      font-size: 45px;
  }

But this is global for all TextField so you need to pass a classname to TextField and use below code

    <Grid item>    
        <TextField 
        label="Status"
        className="your-label-class"
        value={currentItem.status}
        onChange={this.onChangeStatus}
        variant="outlined"
        InputLabelProps={{ style: { fontSize: 14, fontFamily: "monospace" } }}
        select 
        >
        {this.state.status && this.state.status.map((item) => (
            <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}>
                {item.key}
            </MenuItem>
        ))}
        </TextField>     
    </Grid>

in CSS

.your-label-class .MuiInput-input {
      font-size: 45px;
  }