选定的Material UI选项卡具有与其余选项卡不同的颜色

Material UI是一个流行的前端开发框架，它提供了一套现代化的UI组件和设计规范，帮助开发者快速构建美观、响应式的Web应用程序。

选项卡（Tabs）是Material UI中的一个常用组件，用于在页面上创建多个选项卡，以便用户可以在不同的内容之间进行切换。每个选项卡通常由一个标签和一个关联的内容组成。

如果选定的Material UI选项卡具有与其余选项卡不同的颜色，可以通过自定义样式来实现。在Material UI中，可以使用Tab组件的style属性来设置选项卡的样式，包括背景色、文字颜色等。

以下是一个示例代码，展示如何给选定的选项卡设置不同的颜色：

import React from 'react';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

const MyTabs = () => {
  const [value, setValue] = React.useState(0);

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

  return (
    <Tabs value={value} onChange={handleChange}>
      <Tab label="选项卡1" />
      <Tab label="选项卡2" />
      <Tab label="选项卡3" style={{ backgroundColor: value === 2 ? 'red' : 'blue' }} />
    </Tabs>
  );
};

export default MyTabs;

在上述代码中，我们使用了Tabs和Tab组件来创建选项卡。通过设置Tab组件的style属性，我们可以根据选项卡的值（value）来决定其背景色。在这个例子中，如果选项卡的值为2（即第三个选项卡），则背景色为红色，否则为蓝色。