How can I change the border color when I hover a button with Material UI

Question

I would like to be able to change the borderColor when I'm hovering on my button because right now it keep the blue of the primary color.

here's my code:

import React from 'react';
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';


const useStyles = makeStyles(theme => ({
    root: {
        '& > *': {
            margin: theme.spacing(1),
        },
    },
    btn: {
       fontFamily: "Manrope",
       borderColor: "#15e577",
       color: "#000",
       backgroundColor: "white", 
       "&:hover": {
           backgroundColor: "#15e577"
       },
    },

}));


export default function BtnContactUs() {
    const classes = useStyles();
    let theme = createMuiTheme
    return (
        <div className={classes.root}>
            <Button variant="outlined" color="primary" className={classes.btn}>
                Let's talk
            </Button>
        </div>
    );
}

Answer 1

Use the borderColor property

btn: {
       fontFamily: "Manrope",
       borderColor: "#15e577",
       color: "#000",
       backgroundColor: "white", 
       "&:hover": {
           backgroundColor: "#15e577",
           borderColor:"#564345"

       },
    },