Как изменить цвет границы при наведении курсора на кнопку с пользовательским интерфейсом материала

Question

Я хотел бы иметь возможность изменить borderColor, когда я наведите курсор на мою кнопку, потому что сейчас она сохраняет синий цвет основного цвета.

вот мой код:

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

Используйте свойство borderColor

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

       },
    },