如何更改 TextField Select 中所选文本的字体大小从 material-ui

Question

我可以更改标签和下拉菜单的字体大小，但无法设置所选文本的字体大小。

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

在css中，我添加了以下代码：

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

Answer 1

您可以使用 CSS

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

但这对所有 TextField 都是全局的，因此您需要将类名传递给 TextField 并使用下面的代码

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

在CSS

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