禁用 Material UI 默认样式

Question

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

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

- Headmaster

Answer 1

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

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

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

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

请注意，它会覆盖FormControl上的类，因为TextField会将任何未被识别的props传递给FormControl。

您可以在文档中找到所有可覆盖的类，链接在这里：https://material-ui.com/api/form-control/#css 此外，TextField实际上是由多个组件组成的。在这里查看props：https://material-ui.com/api/text-field/#props 因此，如果您想修改Input组件上的类，则可以将样式传递给InputProps={{ classes: youClasses }}，例如。

- Cereal

---

是否可以自定义 fieldset？ - Headmaster

你能分享一下你的代码吗？<TextField />并不包含一个fieldset，所以你传递的某些东西必须是在创建它。 - Cereal

请查看此处：https://codesandbox.io/s/r1o7l3lyxp 我正在使用material-ui的v4版本，因为类已经发生了变化。值得注意的是，在3.9.3中缺少Input上的notchedOutline类的添加。4.0文档：https://next.material-ui.com/api/text-field/ - Cereal

@Cereal - 谢谢，你让我朝着正确的方向前进了。 - Headmaster

我们的类怎么样？我们该如何添加它？ - KD.S.T.

@ichimaru 使用 className 属性。 - Cereal