Material UI TextField聚焦时边框颜色根据Props传入的颜色集设置不生效问题求助

嘿，我来帮你排查这个问题～ 从你贴的代码来看，大概率是样式选择器匹配不对或者useStyles没有正确接收colors参数导致的，我给你几个调整方案试试：

1. 先确保useStyles正确拿到colors参数 #

你定义的makeStyles是依赖props里的colors的，但要记得在组件里调用useStyles时必须传入这个参数，不然样式函数里的colors会是undefined：

// 在你的组件里调用useStyles时要传colors
const classes = useStyles({ colors });

2. 修正样式选择器的匹配逻辑 #

Material UI的OutlinedInput聚焦时，边框对应的类是MuiOutlinedInput-notchedOutline，而且默认样式优先级不低，你原来的选择器可能没精准命中目标元素。调整一下makeStyles的结构：

const useStyles = makeStyles(theme => ({
  root: {
    '& .MuiOutlinedInput-root': {
      // 精准匹配聚焦状态下的边框元素
      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: ({ colors }) => colors?.greenAccent[600] || "white",
        // 可以加个borderWidth确保样式更明显，避免被默认样式覆盖
        borderWidth: '2px',
      },
    },
  },
}));

3. 更简单的替代方案：用sx prop直接写样式 #

如果觉得makeStyles传参和选择器太绕，可以直接用Material UI的sx prop来写样式，这样更直观，也不需要额外的钩子：

<TextField
  style={{ marginLeft: "4px", marginTop: "8px", color: colors ? colors.grey[200] : "white"}}
  label="Valor da meta"
  variant="outlined"
  name="valor_meta"
  id="valor_meta"
  InputLabelProps={{
    style: { 
      color: colors ? colors.grey[200] : "white",
     }
  }}
  // 直接用sx写聚焦边框样式
  sx={{
    '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: colors?.greenAccent[600] || 'white',
    }
  }}
  value={valorMeta}
  onChange={(e) => { /* 你的逻辑 */ }}
/>

额外排查点 #

• 先console.log(colors)确认props传入的colors对象是否存在，greenAccent[600]有没有正确的颜色值；
• 如果还是不生效，可以暂时加!important测试（不推荐长期用，只是排查优先级问题）：borderColor: ${colors.greenAccent[600]} !important``，如果生效了说明是样式优先级的问题，再调整选择器权重。

备注：内容来源于stack exchange，提问作者Gustavo F.