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

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

当prop错误设置为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

您还可以根据border-color明确设置error：

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

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

2 个答案: