Пользовательский интерфейс материала этикетка, которую я даю, отображается за пределами моей коробки - PullRequest
Новая
       4

Пользовательский интерфейс материала этикетка, которую я даю, отображается за пределами моей коробки

0 голосов
/ 13 марта 2020

Компонент, о котором идет речь 

<TextField size="small" 
           id="outlined-basic" 
           label="Name" 
           name="rigName"
           variant="outlined" 
               style={{ width: '33%', paddingLeft: '3%', paddingRight: '4%' }}
               InputLabelProps={{ style: { fontSize: 12 } }}
/>

У меня есть div, обертывающий его этим CSS

.textFields {
  display: inline;
  /* width: 100% !important; */
}

Как это выглядит сейчас enter image description here

Цель состоит в том, чтобы сделать его как минимум на 1/3 пути в поле. Когда я проверяю его с помощью Chrome, я нахожу этот элемент .MuiInputLabel-formControl со свойством left: 0;

Я пытался поместить left: auto в оболочку CSS, но это не работает. и всякий раз, когда я пытаюсь вставить стиль InputLabelProps, он выкрикивает мне

Песочницу, например https://codesandbox.io/s/charming-sinoussi-usmwp

...