Блог

Главная - Вопросы по программированию - Как изменить размер шрифта выделенного текста в текстовом поле Выберите из материала-пользовательский интерфейс

Как изменить размер шрифта выделенного текста в текстовом поле Выберите из материала-пользовательский интерфейс

#reactjs #material-ui #textfield #styling #react-select

Вопрос:

Я мог бы изменить размер шрифта метки и выпадающего списка, но у меня возникли проблемы с настройкой размера шрифта выделенного текста.

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

Ответ №1:

Вы можете сделать это с помощью CSS

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

Но это глобально для всех текстовых полей, поэтому вам нужно передать имя класса в текстовое поле и использовать приведенный ниже код

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

Комментарии:

1. Спасибо, ваш ответ был очень полезен. Это «Выбрать-выбрать» вместо «.MuiInput-ввод».

2. Вам нужно правильно увеличить размер шрифта выбранного значения. таким образом, выбранный каталог показывает сбоку многовход

3. Когда я попробовал «MuiInput-ввод», это не сработало для меня. Но ваше предложение действительно помогло решить мою проблему.

Метки: