I am encountering issues with MUI while attempting to customize the color of my buttons. The two methods I have tried so far have been unsuccessful.
For example, Method 1:
import React from 'react'
import { Typography } from '@mui/material'
import Button from '@mui/material/Button'
import Container from '@mui/material/Container'
import SendOutlinedIcon from '@mui/icons-material/SendOutlined';
import { makeStyles } from '@mui/styles';
import useStyles from './create-styles'
/* Styling Section (CSS) */
export default function Create() {
const classes = useStyles()
return (
<Container>
<Typography className={classes.title} variant="h6" component='h2' gutterBottom color="textSecondary" align='center'>
Create a New Note
</Typography>
<div>
<Button onClick={() => console.log('you clicked me')} type="submit" variant='contained' endIcon={<SendOutlinedIcon/>}>
Submit
</Button>
</div>
</Container>
)
}
import { makeStyles } from '@mui/styles';
export default makeStyles(() => ({
btn: {
fontSize: 500,
backgroundColor: 'pink',
'&:hover': {
backgroundColor: 'orange'
}
},
title: {
color: 'orange',
textDecoration: 'underline',
marginBottom: 20
}
}))
The above method is not working as expected.
Similarly, Method 2:
import React from 'react'
import { Typography } from '@mui/material'
import Button from '@mui/material/Button'
import Container from '@mui/material/Container'
import SendOutlinedIcon from '@mui/icons-material/SendOutlined';
import { makeStyles } from '@mui/styles';
/* Styling Section (CSS) */
const useStyles = makeStyles({
btn: {
fontSize: 500,
backgroundColor: 'pink',
'&:hover': {
backgroundColor: 'orange'
}
},
title: {
color: 'orange',
textDecoration: 'underline',
marginBottom: 20
}
})
export default function Create() {
const classes = useStyles()
return (
<Container>
<Typography className={classes.title} variant="h6" component='h2' gutterBottom color="textSecondary" align='center'>
Create a New Note
</Typography>
<div>
<Button sx={{fontSize: 60, backgroundColor: "red"}} onClick={() => console.log('you clicked me')} type="submit" variant='contained' endIcon={<SendOutlinedIcon/>}>
Submit
</Button>
</div>
</Container>
)
}
Only when using this approach does the color customization work:
sx={{fontSize: 60, backgroundColor: "red"}}
Are there alternative solutions available to avoid styling inline?
I am currently following a tutorial video and it seems that the previous method of styling using MUI has become obsolete.