禁用Material UI默认样式

Question

我正在使用TextField形式的material-ui。在页面上，它以input样式生成Mui-root元素，例如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 }}中。