How to change the font weight in material UI

I tried to change the font weight for the buttons within a navbar, but I don't know why does it go wrong every time. Firstly, I created a separate css file where I tried to set the font weight to bold, no success, then, I tried to set inline styles with the help of style property, and once again, no success, then, I tried to set inline styles with the help of sx property, and of course, again, no success...I tried even to create a styles object which encompasses the font weight for the buttons, as you may see here, but no success - even if I specified the font weight as a number, not as 'bold'...I don't know what to do. Is is something wrong with the material UI so that it overwrites some css properties? If so, how should I get rid of this? Here is a code snippet from my project:

import * as React from 'react'
import '@fontsource/roboto'
import { AppBar, Toolbar, Typography, Button } from '@mui/material'

const styles = {
  toolbar: {
    justifyContent: 'space-between',
  },
  btn: {
    color: 'inherit',
    outline: 'none',
    fontWeight: 700,
  },
}

function App() {
  return (
    <>
      <AppBar>
        <Toolbar style={styles.toolbar}>
          <div>
            <Button style={styles.btn} sx={{ fontWeight: 800 }}>
                USERS
            </Button>
          </div>
        </Toolbar>
      </AppBar>
    </>
  )
}

When I import roboto only the default roboto font with its weight preset at 400 is actually imported. If I want to use roboto, but, with its weight 700 too, I have to explicitly import this flavor of roboto, i.e., import "@fontsource/roboto/700.css"