如何修改Material-UI中TextField Select组件选中文字的字体大小

• 你使用的是variant="outlined"的TextField，对应的输入框类名是.MuiOutlinedInput-input，你写的.MuiInput-input是standard变体TextField的类名，选择器不匹配导致CSS不生效。
• 你在TextField组件上重复声明了两次style属性，后面的style={{ width: 340 }}会覆盖前面定义的字体相关样式，也是样式失效的原因之一。

你可以任选以下任意一种方法实现需求：

方法1：修改CSS选择器 #

把你现有的CSS代码替换为如下内容即可生效：

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

方法2：通过组件Props直接配置，无需额外CSS #

合并TextField的重复style属性，新增InputProps配置选中值的样式：

<div className="setSize">
    <TextField
        size="small"
        label="Status"
        value={currentItem.status}
        onChange={this.onChangeStatus}
        variant="outlined"
        // 合并重复的style，避免样式被覆盖
        style={{ width: 340, fontSize: 14, color: 'grey', fontFamily: "monospace" }}
        InputLabelProps={{ style: { fontSize: 14, color: 'grey', fontFamily: "monospace" } }}
        // 新增InputProps配置选中文字的样式
        InputProps={{
            style: {
                fontSize: 15,
                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>

更推荐使用第二种方法，不需要依赖类名匹配，不会因为Material UI版本升级导致类名变动后样式失效。

内容的提问来源于stack exchange，提问作者Sarahrb