如何在 ui Material Textfield 中应用我自己的 CSS 样式？

Question

我正在开发下一个 js 项目，我应该创建一个表单以使用特定样式进行注册。

问题是我不知道如何用我自己的 css 自定义 textField。我尝试使用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 放在一个文件中，我将它作为样式导入到我的组件中，并在 className 中调用它 这个：

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

我用这种方式尝试了 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>
 )
 }

使用第二种方法，我不得不更改名称中包含“-”的属性，因为我遇到了语法错误。例如，我将 flex-grow 更改为 flexGrow，将背景色更改为 backroundColor。我不知道这是否正确。谁能帮帮我？

Answer 1

要成功使用className，您需要使用StylesProvider 和属性injectFirst 包装您的组件。

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

带有 css 模块和样式提供者：

  <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'
    />
 )
}