如何在React中使用材质ui将内联样式更改为css？

我正在使用内联样式来覆盖React中材质UI组件的样式。最近，我意识到使用CSS是一种更有组织、更好的组件样式设计方法。我已经参考了material ui用户指南上的所有文档。但是找不到解决办法

工作代码：

const useStyles = theme => ({
   input: {
     color: '#000',
     fontSize: "14px",
   },
});

类的内部呈现方法

const { classes } = this.props;

<TextField
    InputProps={{
      className: classes.input
    }}
    InputLabelProps={{
      className: classes.input
    }}

 />

export default withStyles(useStyles)(MyClass);

我怎样才能做到这一点？

---

谢谢。

使用CSS文件和普通类名可以覆盖材质UI组件的样式，但是CSS的特殊性很重要。根据报告：

默认情况下，样式标记最后插入到页面的

元素中。它们比页面上的任何其他样式标记（例如CSS模块、样式化组件）更具特殊性

StylesProvider

组件有一个

injectFirst

属性，用于将样式标记首先注入头部（优先级较低）

从'@material ui/styles'导入{StylesProvider}；
{/*您的组件树。
样式化组件可以覆盖材质UI的样式。*/}

请举例说明您在本声明中的css/SCS的编写位置好吗？

InputProps={{
          className: "input"
        }}

import { StylesProvider } from '@material-ui/styles';

<StylesProvider injectFirst>
  {/* Your component tree.
      Styled components can override Material-UI's styles. */}
</StylesProvider>