使用标签面板和 CSS 的 Material UI答案

【问题标题】：Material UI using tabs panel and CSS使用标签面板和 CSS 的 Material UI
【发布时间】：2020-12-29 09:06:06
【问题描述】：

我无法使用 material-ui 从 TAB PANEL 更改颜色和 CSS 有些想法？ :(

看起来 useStyle 和 theme 不起作用。我可以更改一些其他属性，例如可滚动但不能更改颜色。我想知道其他 CSS 是否存在冲突，但我不这么认为，因为我从 TAB 看到的颜色是蓝色，我没有在我的 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
            >

【问题讨论】：

标签： css reactjs material-ui css-tables react-css-modules

【解决方案1】：

实际上是蓝色的AppBar。查看样式表后，各个选项卡项实际上将transparent 作为background-color 的默认值。所以要解决这个问题，只需覆盖AppBar的根元素的background即可

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 }}>

    ...

【讨论】：