使用样式化组件，为什么条件样式无法访问道具？答案

【问题标题】：With Styled Components, why does a conditional style not have access to props?使用样式化组件，为什么条件样式无法访问道具？
【发布时间】：2018-09-21 23:53:33
【问题描述】：

使用样式化组件我有以下内容：

const StyledTextArea = styled.textarea`
  color: ${(props) => props.theme.colors.black};

  font-size: 24px;

  ${({ error }) => error && `
    // border-color: red; // for testing to confirm props issue
    border-color: ${(props) => props.theme.colors.red[1]};
  `}

`;

  <StyledTextArea
    error={error}
  />

已通过主题正确设置了 textarea 颜色。

当 prop 错误设置为 true 时，注释掉的边框颜色可以正常工作，但使用 props 的动态线在条件内不再工作：

border-color: ${(props) => props.theme.colors.red[1]};

为什么条件似乎无法访问道具？

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

有几种方法可以解决这个问题，最简单的方法是将主题放在原始参数中并从那里使用它。

${({ error, theme }) => error && `
    // border-color: red; // for testing to confirm props issue
    border-color: ${theme.colors.red[1]};
`}

【讨论】：

【解决方案2】：

您还可以根据error 显式设置border-color：

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

【讨论】：

给定一个输入也会有活跃的悬停状态，这种方法可能会变得丑陋。