<Button component={Link} variant="text" to={link.path} sx={{ color: "#fff",'&:hover':{transform: 'translateY(-0.25em);'}}}>{link.label}</Button>
This is what I have tried so far with no sucsess Is it possible to have &:hover in sx or do I have to create a style class in MUI?
Yes, you can use pseudo-selectors in the sx prop
Per MUI documentation
As part of the prop, you can use any regular CSS too: child or pseudo-selectors, media queries, raw CSS values, etc. Here are a few examples:
Using pseudo selectors:
<Box
sx={{
// some styles
":hover": {
boxShadow: 6,
},
}}
>