How do I set up make styles using MUI for my app?-CodePudding

Im having problems with MUI im trying to color my buttons and the 2 ways ive tried have not worked.

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

This isn't working.

and neither is this. example 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 I use this does it work.

sx={{fontSize: 60, backgroundColor: "red"}}

Are there any solutions so I don't have to style inline?

Im following a video and I guess the old way of styling using MUI has depreciated

CodePudding user response：

Here you go with a solution

In the button element you need to provide classes

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
        classes={{root: classes.btn}} // -- added this classes
        onClick={() => console.log('you clicked me')} type="submit" variant='contained' endIcon={<SendOutlinedIcon/>}>
        Submit
      </Button>
      </div>
      

    </Container>
  )
}