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

Question

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

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}
  />

正在通过主题正确设置文本区域颜色。

当 prop error 设置为 true 时，注释掉的 border-color 可以正常工作，但是使用 props 的动态线在条件下不再有效：

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

为什么条件好像不能访问道具？

Answer 1

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

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

Answer 2

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

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

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

With Styled Components, why does a conditional style not have access to props?

reactjs

styled-components