I have a project in Next.js where I need to create a registration form with custom styles. The issue I'm facing is that I'm struggling to customize a textField using my own CSS. I attempted to use the makeStyles function, but encountered a problem as it requires passing objects and some properties like background-color and border-radius are not recognized.
Here's the CSS I want to implement:
.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 saved this CSS in a file, imported it into my component as styles, and applied it using className like this:
<TextField
className={styles.Name}
placeholder='Restaurant Name'
>I also tried using makeStyles in 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>
)
}When using the second method, I had to change properties containing '-' to camelCase due to syntax errors. For example, I changed flex-grow to flexGrow and background-color to backroundColor. I'm unsure if this is the correct approach. Can anyone provide assistance?