如何为我的应用程序设置使用MUI的MUI样式？

Question

我有问题的MUI，我试图给我的按钮，我尝试了两种方式，但没有发挥作用。

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

这不管用。

这也不是。例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>
  )
}

只有当我用这个才能起作用。

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

有什么解决办法吗?这样我就不用内联了？

我在看一段视频，我想使用MUI的旧方式已经贬值了

Answer 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';



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

​