React MUI TimelineDot默认颜色修改无效，求排查代码问题

你的代码问题出在选择器写法错误：

你写的 & .MuiTimelineDot-root 里的空格是后代选择器语法，意思是寻找当前TimelineDot组件内部带有MuiTimelineDot-root类的子元素，但TimelineDot本身就是这个类的根元素，所以这个选择器匹配不到任何元素，样式自然不生效。

正确写法有两种： #

1. 直接在sx中设置根元素样式（最简单的方式）：

<TimelineDot sx={{ backgroundColor: '#00FF00' }} />

2. 如果要使用类选择器，去掉空格（表示当前元素自身的类）：

<TimelineDot
  sx={{
    '&.MuiTimelineDot-root': { backgroundColor: '#00FF00' },
  }}
/>

内容的提问来源于stack exchange，提问作者margherita pizza