为什么会这样呢？
如果您将两个CSS类以相同的特异性程度应用于同一元素，则获胜者将是在文档中最后定义的CSS类（根据
<style>元素在中的顺序
<head>，而
不是 类的顺序）
class样式元素的属性中的名称字符串）。
此页面是一个示例，其中包含两个重现您的问题的TextField元素。如果打开浏览器开发人员工具并查看其
<style>元素，您将看到from样式
makeStyles首先出现，然后是from样式
TextField（例如MuiFormControl）。我在下面显示了一个缩写版本：
<style data-jss="" data-meta="makeStyles">.makeStyles-textFieldInput-1 { margin: 32px; min-width: 250px;}</style><style data-jss="" data-meta="MuiFormControl">.MuiFormControl-root { border: 0; margin: 0; display: inline-flex; padding: 0; position: relative; min-width: 0; flex-direction: column; vertical-align: top;}.MuiFormControl-marginNormal { margin-top: 16px; margin-bottom: 8px;}.MuiFormControl-marginDense { margin-top: 8px; margin-bottom: 4px;}.MuiFormControl-fullWidth { width: 100%;}</style><style data-jss="" data-meta="MuiTextField"></style>所述
MuiFormControl-root类被施加到经由文本域的指定的类相同的元件
className特性（例如，从textFieldInput类
makeStyles/useStyles）。由于MuiFormControl
<style>元素出现在该
makeStyles
<style>元素之后，因此MuiFormControl的默认样式为，
margin并且
min-width胜过所指定的自定义样式
makeStyles。
这些
<style>元素的顺序由
makeStyles调用顺序控制。对于给定Material-
UI组件的默认样式，
makeStyles在首次导入该组件时调用。
对于典型的使用模式，在
makeStyles同一个Javascript文件中调用，然后调用该类
useStyles并将类传递给Material-
UI组件，该顺序将始终是您想要的顺序，因为Material-UI组件的导入将在调用之前进行到
makeStyles。
当您将调用移至
makeStyles另一个文件并导入
useStyles其返回的方法时，您会
useStyles在 导入Material-
UI组件（例如本例中的TextField） 之前 引入了导入的可能性。
此沙箱中的代码对此进行了演示：https :
//presandbox.io/s/makestyles-
first-i1mwh
它可能在第一次热重新加载时起作用的原因是，
makeStyles
<style>在进行更改时，元素已被删除，然后添加到最后。Mui
*样式元素不会更改，因此它们会保留在原位置（在
makeStyles重新加载页面之前，它在新样式元素之前）。
您无法轻易地使用高阶组件API（即
withStyles）来以这种方式射击自己的脚，因为在其中
makeStyles被调用了，
withStyles因此
withStyles在将其作为参数传递之前，您始终会导入被包装的组件。
我怎样才能解决这个问题？
您可以通过几种方法解决此问题。一种方法是仅确保 在* 导入Material-UI组件（例如） 之后 导入useStyles
函数。
*
TextField
更改：
import { useStyles } from "./styles";import TextField from "@material-ui/core/TextField";相反是：
import TextField from "@material-ui/core/TextField";import { useStyles } from "./styles";这在这里进行了演示：https :
//presandbox.io/s/import-textfield-
first-9qybd
但是，这是相当脆的，如果你有一个以上的类型组件的风格
styles.js和进口
styles.js从许多文件，自那时以来它可靠地工作，你都依赖于进口
所有 由风格的材质，UI组件
styles.js的前 第一 位置您导入的
styles.js。
解决此问题的另一种方法是导出Material-
UI组件的样式版本，而不是导出
useStyles功能。然后，您只需导入此自定义组件，而不是Material-UI组件。
import { withStyles } from "@material-ui/core/styles";import MuiTextField from "@material-ui/core/TextField";const styles = theme => ({ root: { margin: theme.spacing(4), minWidth: 250 }});export const TextField = withStyles(styles)(MuiTextField);此处通过两个不同的语法选项进行了演示：https : //presandbox.io/s/import-styled-
textfield-1ytxl
