ReactJS: как изменить размер шрифта-заполнителя автозаполнения пользовательского интерфейса Material?

#javascript #reactjs #material-ui #material-table

#javascript #reactjs #материал-пользовательский интерфейс #материал-таблица

Вопрос:

Я хочу изменить размер шрифта заполнителя автозаполнения пользовательского интерфейса Material. Есть ли какой-нибудь способ?

              <Autocomplete
                  multiple
                  id="tags-outlined"
                  options={top100Films}
                  getOptionLabel={(option) => option.title}
                  defaultValue={[top100Films[13]]}
                  filterSelectedOptions
                  size="small"

                  renderInput={(params) => (
                    <TextField
                      {...params}
                     
                      variant="outlined"

                      placeholder="Enter Transshipment Ports"

                      
                    />
                  )}
                />

Ответ №1:

В вашем примере вы можете настроить таргетинг на input элемент компонента, который вы визуализируете, в renderInput котором используется TextField makeStyles

 const useStyles = makeStyles({
  customTextField: {
    "amp; input::placeholder": {
      fontSize: "20px"
    }
  }
})

<TextField
  classes={{ root: classes.customTextField }}
  {...params}
  variant="outlined"
  placeholder="Enter Transshipment Ports"
/>

Пример ниже с использованием демонстрации раздвоенного MUI

Ответ №2:

Вы можете просто добавить css ::placeholder в класс / идентификатор поля ввода и изменить размер шрифта

Пример:

 #tags-outlined::placeholder {
   font-size: 14px;
}

Ответ №3:

Свойство sx позволяет пользователям переопределять стиль, применяемый к корневому объекту MuiFormLabel, включая размер шрифта. Это полезно для создания пользовательских меток, которые лучше соответствуют потребностям пользователя в дизайне.

 <TextField
        {...props}
        sx={{
          'amp; .MuiFormLabel-root': {
            fontSize: '0.8rem',
          },
        }}
      />