如何在TextField物料选择-界面中更改选中文本的字体大小

Question

我可以更改标签和下拉fontsize，但无法设置选定文本的fontsize。

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