css - 禁用 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其实是由多个组件组成的。看看这里的 Prop :https://material-ui.com/api/text-field/#props

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