material-ui - 如何用给定的颜色填充 MaterialUI 选项卡？

Question

在自定义选项卡部分，文档给出了如何将自己的 CSS 注入框架组件的示例，我想使用它，但我不确定如何使用。我希望我的活动选项卡完全用一组颜色填充，而不是在活动选项卡下简单地有一个下划线。有人知道我会怎么做吗？

标签： material-ui

Answer 1

下面的示例确实隐藏了指示器并使用所选颜色填充选项卡：

import React from "react";
import ReactDOM from "react-dom";
import { AppBar, Tabs, Tab, makeStyles } from "@material-ui/core";

const useStyle = makeStyles(theme => ({
  indicator: {
    backgroundColor: "transparent", 
  },
  selected: {
    background: theme.palette.secondary.main,
  },
}));

function App() {
  const [value, setValue] = React.useState(0);
  const classes = useStyle();
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <React.Fragment>
      <AppBar position="static">
        <Tabs
          classes={{
            indicator: classes.indicator
          }}
          value={value}
          onChange={handleChange}
        >
          <Tab label="Item One" classes={{ selected: classes.selected }} />
          <Tab label="Item Two" classes={{ selected: classes.selected }} />
          <Tab label="Item Three" classes={{ selected: classes.selected }} />
        </Tabs>
      </AppBar>
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));