删除来自材料 ui 的文本框的填充

Question

我正在尝试从文本框中删除填充，但问题是它来自 Material UI。

我为所有类指定了填充 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

如果您阅读docs，您可以找到将属性应用于本机输入元素的 inputProps（不是 InputProps）属性。如下图可以传一个style属性。

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

Answer 2

解决它的一种方法是创建一个有用的类并覆盖材料文本字段的样式。这样你就可以重复使用了

我离开这个例子 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

Answer 3

解决方案在这个答案How to style MaterialUI textfield

将 className 传递给 TextField 以及 InputProps

<TextField multiline={true} variant="outlined" rowsMax={10} placeholder="Notes" className={classes.formInput}
            InputProps={{ classes: { input: classes.formAreaInput } }} fullWidth onChange={this.handleNotesInput} />

Answer 4

我在这个网站上找到了答案：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}}
/>