如何在ui材质文本字段中应用自己的css样式？

我正在做下一个js项目，在那里我应该创建一个特定样式的注册表单

问题是我不知道如何用自己的css自定义

文本字段。我尝试使用
makeStyles
函数，但问题是我应该将对象传递给
makeStyles
，并且一些属性不存在，例如背景色、边框半径等

这是我想要应用的css：

.Name {
  width: 535px;
  height: 61px;
  flex-grow: 0;
  margin: 40px 100px 20px 0;
  padding: 19px 329px 20px 20px;
  border-radius: 8px;
  border: solid 1px var(--select-border);
  background-color: #ffffff;
}

我把这个css放在一个文件中，作为样式导入到我的组件中，并用类名调用它，如
这：



我用这种方式尝试了makeStyles：

const useStyles = makeStyles({
nameStyles: {
width:' 535px',
height:' 61px',
flexGrow:'0',
margin:'40px 100px 20px 0',
padding: '19px 329px 20px 20px',
border: '8px',
border: 'solid 1px var(--select-border)',
backgroundColor:' #ffffff',
})
   
   export default function RestaurantRegistration() {
   const classes = useStyles()

   return (
    <React.Fragment>
  
  
   <TextField
    className={classes.nameStyles}
    placeholder='Restaurant Name'
   >
 

   </TextField>
 )
 }

const useStyles=makeStyles({
名称样式：{
宽度：“535px”，
高度：'61px'，
flexGrow:“0”，
保证金：'40px 100px 20px 0'，
填充：“19px 329px 20px 20px”，
边框：“8px”，
边框：“实心1px变量（--选择边框）”，
背景颜色：“#ffffff”，
})
导出默认函数RestaurantRegistration（）{
常量类=useStyles（）
返回(
)
}

使用第二种方法，我必须更改名称中带有“-”的属性，因为我遇到了语法错误。例如，我用flexGrow更改了flex grow，用backroundColor更改了背景色。我不知道这是否正确。有人能帮我吗？
要成功使用
类名，您需要用
包装组件lesProvider
具有属性
injectFirst

此外，如果选中，您可以使用
classes
prop，这是一个可以覆盖或扩展其样式的对象。您可以使用
root
规则名称将样式传递给TextField

使用css模块和样式Provider：

  <StylesProvider injectFirst> 
    <TextField
        className={styles.Name}
        placeholder='Nom de votre restaurant'
       >
  </StylesProvider>



使用makeStyles：

const useStyles = makeStyles({
  root: {
    width:'535px',
    height:'61px',
    flexGrow:'0',
    margin:'40px 100px 20px 0',
    padding: '19px 329px 20px 20px',
    border: '8px',
    border: 'solid 1px var(--select-border)',
    backgroundColor:'#ffffff',
}})
   
export default function RestaurantRegistration() {
   const classes = useStyles()

   return (
    <TextField
      classes={classes}
      placeholder='Restaurant Name'
    />
 )
}

const useStyles=makeStyles({
根目录：{
宽度：'535px'，
高度：'61px'，
flexGrow:“0”，
保证金：'40px 100px 20px 0'，
填充：“19px 329px 20px 20px”，
边框：“8px”，
边框：“实心1px变量（--选择边框）”，
背景颜色：“#ffffff”，
}})
导出默认函数RestaurantRegistration（）{
常量类=useStyles（）
返回(
)
}

如果您刚刚复制粘贴了代码，这将给您带来一个错误，因为您缺少“名称样式”的一个右括号。据我所知，您的语法是正确的，需要使用camelCase方法命名这些变量，因为您正在使用ts编写，稍后会转换为css。添加更详细的分析（控制台日志等）还有，我刚才看到的是，如果你不在文本字段中写任何东西，这应该是一个带有以下语法的自动关闭标记：我尝试了很多方法，但没有得到我想要的结果，我现在不知道问题出在哪里这两种方法都不适合我，还有第二种方法我不适合有一个文本字段我有很多，所以我必须对每个字段进行不同的样式设置，以便class={classes}不会做这项工作。@Ghost我为这两种情况都创建了一个带有实现的沙盒。实际上，您可以使用
StylesProvider
首先插入您的类名，我将其添加到answerfor makestyle中，您可以添加不同于root的名称，而不是pass as
classes={root:classes.firstStyle}
以此类推，效果会更好，但是您知道如何删除输入中的行吗？这就像将文本字段放入框中一样
const useStyles = makeStyles({
  root: {
    width:'535px',
    height:'61px',
    flexGrow:'0',
    margin:'40px 100px 20px 0',
    padding: '19px 329px 20px 20px',
    border: '8px',
    border: 'solid 1px var(--select-border)',
    backgroundColor:'#ffffff',
}})
   
export default function RestaurantRegistration() {
   const classes = useStyles()

   return (
    <TextField
      classes={classes}
      placeholder='Restaurant Name'
    />
 )
}