Material UI 使用选项卡面板和 CSS

Question

我无法使用 material-ui 从选项卡面板更改颜色和 CSS 一些想法？ :(

useStyle 和 theme 似乎不起作用。我可以更改其他一些属性，例如可滚动，但不能更改颜色。我想知道是否与其他 CSS 有一些冲突，但我不这么认为，因为我从 TAB 中看到的颜色是蓝色的，我没有在我的 Web 应用程序中使用蓝色。

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

实际上是 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 }}>

    ...

Material UI 使用选项卡面板和 CSS

Material UI using tabs panel and CSS

css

reactjs

material-ui

css-tables

react-css-modules