如何修改MUI TimelineConnector的颜色？设置color属性仅对TimelineDot生效

你遇到的核心问题是TimelineConnector不会自动继承TimelineDot的color属性——Material-UI的Timeline组件中，只有TimelineDot支持直接通过color属性预设主题色，TimelineConnector需要单独配置样式才能同步颜色。

下面是两种实用的修改方案：

方案一：直接给TimelineConnector设置内联样式 #

直接指定和TimelineDot一致的主题色值，快速实现颜色统一：

<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot color="primary" />
      {/* 用Material-UI primary主题色的默认值，也可以替换成自定义十六进制颜色 */}
      <TimelineConnector style={{ backgroundColor: '#1976d2' }} />
    </TimelineSeparator>
    <TimelineContent>Eat</TimelineContent>
  </TimelineItem>
</Timeline>

方案二：用自定义样式类批量控制 #

如果需要给多个TimelineItem统一设置样式，推荐用makeStyles（或styled-components）封装样式：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  timelineConnector: {
    backgroundColor: theme.palette.primary.main,
  },
}));

function CustomTimeline() {
  const classes = useStyles();
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot color="primary" />
          <TimelineConnector className={classes.timelineConnector} />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      {/* 其他TimelineItem可以复用同一个样式类 */}
    </Timeline>
  );
}

进阶：全局统一Timeline样式 #

如果想让整个项目的Timeline组件都默认使用指定颜色，可以通过CSS选择器批量修改：

const useStyles = makeStyles((theme) => ({
  globalTimeline: {
    '& .MuiTimelineConnector-root': {
      backgroundColor: theme.palette.primary.main,
    },
    '& .MuiTimelineDot-root': {
      backgroundColor: theme.palette.primary.main,
    },
  },
}));

// 使用时
<Timeline className={classes.globalTimeline}>
  {/* 所有子元素会自动应用统一颜色 */}
</Timeline>

内容的提问来源于stack exchange，提问作者Calvin Langer