Question

我不能使用material-ui从TAB PANEL更改颜色和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的默认值。因此，要解决此问题，只需覆盖background的根元素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 }}>

    ...

使用选项卡面板和CSS的材料UI

1 个答案: