When the page first loads, material-ui styles take precedence over mine, how can I fix this?

Question

React

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles({
  btn: {
    width: '16rem',
    height: '4.6rem',
    margin: '9px 0',
    border: 'none',
    borderRadius: '3rem',
    backgroundColor: '#683de7',
    fontSize: '1.2rem',
    color: '#fff',
    cursor: 'pointer',
    transition: 'all 0.25s linear',
  },
})

export default useStyles

import React from 'react'
import { Link } from 'react-router-dom'
import Button from '@mui/material/Button'

type Props = {
  to: string
  text: string
  className?: any
}

const LinkedButton = ({ to, text, className }: Props) => {
  return (
    <Link to={to}>
      <Button
        variant="contained"
        color="primary"
        size="medium"
        className={className}
      >
        {text}
      </Button>
    </Link>
  )
}

export default LinkedButton

import React from 'react'
import Box from '@mui/material/Box'
import LinkedButton from '../LinkedButton/LinkedButton'
import useStyles from './styles'

const WelcomePageButtons = () => {
  const classes = useStyles()
  return (
    <Box>
      <LinkedButton to={'/login'} text={'log in'} className={classes.btn} />
      <LinkedButton
        to={'/registration'}
        text={'registration'}
        className={classes.btn}
      />
    </Box>
  )
}

export default WelcomePageButtons

When loading the page, material ui styles take precedence, but when you follow the link and back, mine take precedence, how can I fix this?

Answer 1

IMHO use !important