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

Question

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

Я дал отступ 0 для всех классов, но заполнение все еще не удаляется.

Можете ли вы сказать мне, как удалить этот отступ?

.MuiOutlinedInput-input-1708 {
    padding: 18.5px 14px;
}

Вот мой код и песочница:

https://codesandbox.io/s/m58841kkwp

cssLabel: {
    "&$cssFocused": {
      color: { borderColor: "red", padding: 0 }
    }
  },
  cssFocused: { borderColor: "red", padding: 0 },
  cssUnderline: {
    "&:after": {
      borderBottomColor: "red",
      padding: 0
    }
  },
  // cssOutlinedInput: {
  //   "&$cssFocused $notchedOutline": {
  //     borderColor: "green"
  //   }
  // },

  cssOutlinedInput: {
    "& $notchedOutline": {
      //add this nested selector
      borderColor: "red",
      padding: 0
    },

    "&$cssFocused $notchedOutline": {
      borderColor: "green",
      padding: 0
    }
  },

  notchedOutline: { borderColor: "red", padding: 0 },

Answer 1

Я нашел ответ на этом сайте: https://material -ui.com / customization / overrides /

const styles = theme => ({
  noPadding: {
    padding: 0
  },
});

// some code

const { classes } = this.props;

// some code

<OutlinedInput
  labelWidth={0}
  name="timeUnit"
  id="outlined-time-unit"
  classes={{input: classes.noPadding}}
/>

Answer 2

Если вы прочитали документы , вы можете найти свойство inputProps (не InputProps), которое применяет атрибуты к собственному элементу ввода.Как показано ниже, вы можете передать атрибут стиля.

<TextField
    inputProps={{
       style: {
         padding: 5
       }
    }}
/>

Answer 3

Одним из способов ее решения может быть создание полезного класса и перезапись стилей текстового поля материала.Таким образом, вы сделаете его многоразовым

Я оставляю пример https://stackblitz.com/edit/react-textfield-without-padding

Примечание: Я оставил отступ с 5px, чтобы он выглядел лучше в качестве примера.Вы можете настроить его так, чтобы у вас не было заполнения

Полезные ресурсы

• https://reactjs.org/docs/faq-styling.html
• https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822