Styled Components条件样式无法访问props？代码中主题样式失效排查

这个问题的核心是嵌套箭头函数的作用域冲突，你在内层的${(props) => ...}里并没有拿到正确的props对象。

问题分析 #

看你这段代码：

const StyledTextArea = styled.textarea`
  color: ${(props) => props.theme.colors.black};
  font-size: 24px;
  ${({ error }) => error && `
    // border-color: red; // 用于测试确认props问题
    border-color: ${(props) => props.theme.colors.red[1]};
  `}
`;

外层的({ error }) => ...虽然解构了error，但内层的(props) => props.theme...是一个独立的函数——这个内层函数的props并不是Styled Components传递给外层的完整props对象，而是一个未被正确赋值的变量，自然就无法访问到theme了。而直接写border-color: red;是静态CSS，不受作用域问题影响，所以能正常生效。

两种解决方案 #

方案1：在外层函数中同时解构所需属性

直接在外层把需要的error和theme一起解构出来，内层就不用再写函数，直接使用变量即可：

const StyledTextArea = styled.textarea`
  color: ${(props) => props.theme.colors.black};
  font-size: 24px;
  ${({ error, theme }) => error && `
    border-color: ${theme.colors.red[1]};
  `}
`;

方案2：保留完整props，不做部分解构

如果不想解构，直接在外层函数接收完整的props，内层就能直接访问props.theme了：

const StyledTextArea = styled.textarea`
  color: ${(props) => props.theme.colors.black};
  font-size: 24px;
  ${(props) => props.error && `
    border-color: ${props.theme.colors.red[1]};
  `}
`;

这两种写法都能解决你的问题，推荐第一种，代码更清晰简洁。

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