Блог

я работаю над следующим проектом js, где я должен создать форму для регистрации с определенными стилями.

Проблема в том, что я не могу понять, как настроить a textField с помощью моего собственного 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 в файл, который я импортирую в свой компонент как styles и вызываю его в 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, background-color на backroundColor. Я даже не знаю, правильно ли это. Кто-нибудь может мне помочь, пожалуйста?

Чтобы использовать className successful , вам нужно обернуть свой компонент StylesProvider с помощью свойства injectFirst with .

кроме того, если вы проверите API текстового поля, вы можете использовать classes prop, который является объектом, который может переопределять или расширять его стили. Вы можете использовать имя root правила для передачи ваших стилей в текстовое поле.

с помощью модулей css и stylesProvider:

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