如何更改出现验证错误的选项卡的选项卡指示器颜色？

Question

每当选项卡具有无效字段时，我都在与 Material UI 样式作斗争。

这是我的风格，

const useTabsClasses = makeStyles(theme => ({
  root: {
    color: theme.palette.common.accent,
    height: '2rem',
  },
  indicator: {
    backgroundColor: theme.palette.common.accent,
  },
  indicatorColor: {
    backgroundColor: theme.palette.common.accent,
  },
}));

const useTabClassesErrorStyles = makeStyles({
  wrapper: {
    color: 'red',
  },
});

const tabsClasses = useTabsClasses();
const tabClassesError = useTabClassesErrorStyles();

这是我的标签，

<Tabs
  value={tabValue}
  onChange={(event, newValue) => setTabValue(newValue)}
  classes={tabsClasses}
>
  <Tab label="Description" classes={!tabValidate['description'] ? tabClassesError : {}} />
  <Tab label="Cover" classes={!tabValidate['Tab2'] ? tabClassesError : {}} />
</Tabs>

当没有错误时，文本颜色和指示器颜色为蓝色。由于代码现在是这样，当该选项卡出现错误时，我设法使无效选项卡的文本颜色变为红色：

但我怎样才能改变指示器的颜色呢？我希望文本和指示器颜色为红色。

根据文档，有一个属性称为indicator可以被覆盖，但这将更改所有选项卡的指示器样式。

更改所有选项卡的选项卡指示器样式的沙盒示例。但是，我只想更改特定选项卡的指示器样式，而不是全部选项卡。

---

编辑

我如何为我的用例解决它（尽管，接受的答案的方法也可以完成这项工作，我的实现需要稍微更自定义的方法）。

我添加TabIndicatorProps到<Tabs ... />组件中，并动态确定颜色，因为多个选项卡可能存在验证错误：

const theme = useTheme(); // hook for material ui

const getTabIndicatorStyle = () => {
  const tabIndicatorColor = theme.palette.error.main;
  switch (tabValue) {
    case 0:
      if (!tabValidate['description']) return tabIndicatorColor;
      break;
    case 1:
      if (!tabValidate['cover']) return tabIndicatorColor;
      break;
    default:
      return '';
  }
};

<Tabs
  value={tabValue}
  onChange={(event, newValue) => setTabValue(newValue)}
  classes={tabsClasses}
  TabIndicatorProps={{
    style: {
      backgroundColor: getTabIndicatorStyle(),
    },
  }}
>
  <Tab label="Description" classes={!tabValidate['description'] ? tabClassesError : {}} />
  <Tab label="Cover" classes={!tabValidate['Tab2'] ? tabClassesError : {}} />
</Tabs>

Answer 1

写一个清单makeStyles就可以了

classes={{ indicator: indicatorList[selected]().indicator }}

如果需要主题，请使用useTheme并将其作为参数传递。

您还可以在具有主题的组件内构建一个恒定的颜色列表，这将是相同的。

完整代码：

const indicatorList = ["red", "green", "blue", "black"].map(x =>
  makeStyles(theme => ({
    indicator: {
      // backgroundColor: theme.palette.common.accent
      backgroundColor: x
    }
  }))
);

export default function App() {
  const [selected, setSelected] = useState(0);
  const setTabValue = idx => {
    setSelected(idx);
  };
  return (
    <div className="App">
      <Tabs
        value={selected}
        onChange={(e, idx) => setTabValue(idx)}
        classes={{ indicator: indicatorList[selected]().indicator }}
      >
        <Tab label="Description" />
        <Tab label="Cover" />
        <Tab label="Cover" />
        <Tab label="Cover" />
      </Tabs>
    </div>
  );
}