React MUI TextField聚焦时如何仅修改收缩标签文本颜色？

我想要将“First Name”标签改为红色。

尝试了以下代码：

<TextField id="outlined-basic" label="First name" variant="outlined"
      sx={{
        '& .Mui-focused':{
          color:'red'
        }
      }}
      />

但现在不仅收缩的标签，其他元素也变成了红色，效果如下：

请问如何仅修改收缩状态下的标签颜色？

要仅修改收缩状态下的标签颜色，需要精准定位到标签收缩时的专属类.MuiInputLabel-shrink，调整sx配置即可：

方案1：所有收缩状态下的标签都变红 #

<TextField
  id="outlined-basic"
  label="First name"
  variant="outlined"
  sx={{
    '& .MuiInputLabel-shrink': {
      color: 'red',
    }
  }}
/>

方案2：仅聚焦时的收缩标签变红 #

如果只需要在输入框聚焦、标签处于收缩状态时才显示红色，可以结合聚焦类.Mui-focused来定位：

<TextField
  id="outlined-basic"
  label="First name"
  variant="outlined"
  sx={{
    '&.Mui-focused .MuiInputLabel-shrink': {
      color: 'red',
    }
  }}
/>

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