禁用 Material UI 默认样式

Question

我正在使用 TextField 表单 material-ui。在页面上，它会生成具有Mui-root 样式的input 元素，例如border 或border-radius。

是否可以禁用 material-ui 默认样式？

Answer 1

创建您自己的覆盖样式的包装器组件。

例如，以下将覆盖 FormControl 上的根样式：

const useStyles = makeStyles({
  root: {}
});

export default () => {
  const classes = useStyles();
  return <TextField classes={classes} />
}

请注意，它会覆盖 FormControl 上的类，因为 TextField 会将任何无法识别的道具传递给 FormControl。

您可以在文档中找到所有可以覆盖的类，这里：https://material-ui.com/api/form-control/#css

此外，TextField 实际上是由多个组件组成的。看看这里的道具：https://material-ui.com/api/text-field/#props

因此，如果您想修改 Input 组件上的类，您可以将样式传递给 InputProps={{ classes: youClasses }}，例如。