Javascript 选择时，如何使选项卡面板的每个框都着色？

我需要使每个选项卡栏亮起（或着色），但我不知道如何做到这一点。有人能教我吗？：）

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Tabs”导入选项卡；
从“@material ui/core/Tab”导入选项卡；
const useStyles=makeStyles({
根目录：{
flexGrow:1，
},
});
导出默认函数CenteredTabs（）{
const classes=useStyles（）；
const[value，setValue]=React.useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
返回(
);

结果:

---

此处的材料UI React文档对此进行了回答：

---

单击图标以显示示例的完整来源。

此处的材料UI React文档对此进行了回答：

---

单击图标显示示例的完整源代码。

您的javascript代码在哪里？您知道如何使用javascript吗？@DCR似乎是一个奇怪的问题。显示的是标准react JS和JSX代码您的javascript代码在哪里？您知道如何使用javascript吗？@DCR似乎是一个奇怪的问题。显示的是标准react JS和JSX代码是的，我从物料界面批量复制，因为我需要更改选项卡指示器，以便不仅高亮显示选项卡的底部，而且高亮显示整个选项卡。物料界面中的示例仅显示选项卡底部的选项卡指示器高亮显示（选中时）。尝试查看它的API！是的，我从物料界面复制了批发，因为我需要更改选项卡指示器，以便不仅高亮显示选项卡的底部，而且高亮显示整个选项卡。物料界面中的示例仅在选项卡的底部显示选项卡指示器高亮显示（选中时）。尝试查看它的API！

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

const useStyles = makeStyles({
  root: {
    flexGrow: 1,
  },
});

export default function CenteredTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Paper className={classes.root}>
      <Tabs
        value={value}
        onChange={handleChange}
        indicatorColor="primary"
        textColor="primary"
        centered
      >
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </Tabs>
    </Paper>
  );