Material-UI：根据传入Props设置StyledTab组件的背景颜色

DevOps 小满

2026-8-21

解决方案

有两种常用方式可以实现根据传入的属性动态切换Tab背景色：

方法一：利用`withStyles`的props参数动态生成样式

withStyles的样式函数支持接收组件传入的props作为第二个参数，你可以直接在样式规则里根据shouldSetBackgroundColorToOrange属性判断背景色：

import { withStyles } from "@material-ui/core/styles";
import Tab from "@material-ui/core/Tab"; // 注意要导入Tab组件

const StyledTab = withStyles((theme, props) => ({
  root: {
    backgroundColor: props.shouldSetBackgroundColorToOrange ? "orange" : "yellow",
  },
}))((props) => {
  // 剔除自定义属性，避免传递给Tab组件触发警告
  const { shouldSetBackgroundColorToOrange, ...restProps } = props;
  return <Tab {...restProps} />;
});

使用方式不变：

<StyledTab label={"Room"} shouldSetBackgroundColorToOrange={true} />

方法二：通过内联样式覆盖原有样式

如果不想修改withStyles的样式定义，可以在组件内部通过style属性动态设置背景色，优先级会高于classes里的样式：

import { withStyles } from "@material-ui/core/styles";
import Tab from "@material-ui/core/Tab";

const StyledTab = withStyles((theme) => ({
  root: {
    backgroundColor: "yellow",
  },
}))((props) => {
  const { shouldSetBackgroundColorToOrange, ...restProps } = props;
  const tabStyle = shouldSetBackgroundColorToOrange 
    ? { backgroundColor: "orange" } 
    : {};
  
  return <Tab {...restProps} style={tabStyle} />;
});