css - Material ui TabList 悬停颜色变化

Question

我想在默认情况下选择它下方的红色跨度边框时更改 Material UI TabList 现在我想将该跨度边框颜色更改为蓝色。下面是屏幕截图和代码。材质 Ui TabList

import Tab from '@material-ui/core/Tab';
import TabPanel from '@material-ui/lab/TabPanel';
import TabContext from "@material-ui/lab/TabContext";
import { TabList } from '@material-ui/lab';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    TabList: {
        "span": {
            backgroundColor: "#cccccc",
        },
        
    },
});

export default function SignInUp()
{

    

    const tablistStyle =useStyles();
    const paperStyle ={padding:10,height:'70vh',width:320,margin:'50px auto'}
    const [value, setValue] = React.useState(1)
    const handleChange = (event, newValue) => 
    {
        setValue(newValue);
    };
    

    return(

        <Paper elevation={20} style={paperStyle}>
               <TabContext  value={value.toString()} >
                
                    <TabList  tabindicatorprops={{ classes: { span: tablistStyle.span } }}  onChange={handleChange}>
                    <Tab   value="1" label="Sign In"/>
                    <Tab    value="2" label="Sign Up"/>
                    </TabList>
                
                 <TabPanel  value="1" >
                     <SignIn></SignIn> 
                </TabPanel>

                <TabPanel  value="2" >
                <SignUp></SignUp>
                </TabPanel>
                </TabContext>
</Paper>
        )

}

标签： cssreactjsmaterial-ui