При первой загрузке страницы стили material-ui приоритетнее моих, как можно это исправить?

Question

[Leo_SAN]

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

При загрузке страницы, стили material ui приоритетнее, но когда переходишь по линку и назад, мои становятся приоритетнее, как это можно исправить?

Comments

[Владимир]

Почему у вас используется и Mui и @material-ui/core/styles ?

[Владимир]

В 5 версии используют по умолчанию
https://emotion.sh/docs/styled
Можно переключиться на классические стайлед компонентс
https://mui.com/guides/styled-engine/

Answer 1

[ikutin666]

имхо используйте !important

Comments

[Владимир]

Нееееееееет!