CODEWITHSUNDEEP
cssreactjsmaterial-uinext.js
Ghost
Ghost

Reputation: 57

How can i apply my own css style in ui Material Textfield?

i am working on next js project where i should create a form for registration with specific styles.

The problem is that I can't figure out how to customize a textField with my own css. I tried to use makeStyles function but the problem is that I should pass objects to makeStyles and some properties does not exist like background-color, border-radius etc ...

this is the css i want to apply:

.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;
}

i putted this css in a file which i import in my component as styles and call it in className like this :

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

and i tried with makeStyles this way :

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

With the second way I had to change properties who have '-' in their names because I got a syntax error. For example I changed flex-grow with flexGrow, background-color with backroundColor. I don't know if that is even right. Can anyone help me please?

Upvotes: 1

Views: 1248

Answers (1)

buzatto
buzatto

Reputation: 10382

To use className successful you need to wrap your component with StylesProvider with the property injectFirst.

also, if you check TextField API you can use classes prop which is an object that can override or extend its styles. You can use the root rule name to pass your styles to TextField.

with css modules and stylesProvider:

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

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

so-textfields

Upvotes: 1

Related Questions