Material UI using tabs panel and CSS

Question

I can not change the color and CSS from the TAB PANEL using material-ui Some ideas? :(

Looks like useStyle and theme are not working. I could change some other properties like scrollable but not the colors. I wonder if there is some conflict con other CSS, but I don't think so because the colors I see from the TABs are blue, I'm not using blue in my Web-App.

import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';



 function TabPanel(props) {
      const { children, value, index, ...other } = props;
    
      return (
        <div
          role="tabpanel"
          hidden={value !== index}
          id={`scrollable-auto-tabpanel-${index}`}
          aria-labelledby={`scrollable-auto-tabpanel-${index}`}
          {...other}
        >
          {value === index && (
            <Box p={3}>
              <Typography>{children}</Typography>
            </Box>
          )}
        </div>
      );
    }
    
    TabPanel.propTypes = {
      children: PropTypes.node,
      index: PropTypes.any.isRequired,
      value: PropTypes.any.isRequired,
    };
    
    function a11yProps(index) {
      return {
        id: `scrollable-auto-tabpanel-${index}`,
        'aria-controls': `scrollable-auto-tabpanel-${index}`,
      };
    }
    
    function LinkTab(props) {
      return (
        <Tab
          component="a"
          onClick={(event) => {
            event.preventDefault();
          }}
          {...props}
        />
      );
    }
    
    const useStyles = makeStyles((theme) => ({
      root: {
        flexGrow: 1,   
        margin: 0,
        background: 'white',
      },
    }));
    
    export default function NavTabs() {
      const classes = useStyles();
      const [value, setValue] = React.useState(0);
    
      const handleChange = (event, newValue) => {
        setValue(newValue);
      };
    
      return (
      
          <AppBar position="static">
    
          
            <Tabs
              variant="container-fluid"
              value={value}
              onChange={handleChange}
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs example"
              centered
            >
           

Answer 1

It's actually the AppBar that has that blue color. Upon reviewing the stylesheet, the individual tab items actually have transparent as a default value for background-color. So to solve this, just override the background of the root element of AppBar

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    margin: 0,
    background: "white"
  }
}));

export default function NavTabs() {
  const classes = useStyles();

    <AppBar position="static" classes={{ root: classes.root }}>

    ...