将动态 css 属性移到顶部会使错误消失。

const StyledLabel = styled(P)`
  ${({ theme,selected }) =>
    selected && `border: 1px solid ${theme.primary.black};`}
  cursor: pointer;
  border: 1px solid transparent;
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: ${spacing.override(6)};

  &:hover {
    border: 1px solid ${theme.primary.black};
  }
`;

我没有使用 ESLint 的经验，但这是一个典型的工具案例，它会将您指向错误的行以进行错误处理。当一个工具给你一个表面上看起来很错误的错误时，重新评估周围的代码并手动验证它是否正确通常是个好主意。

在这种情况下，额外的分号实际上是在这条语句上：

${({ theme,selected }) =>
  selected && `border: 1px solid ${theme.primary.black};`};

当它在运行时被解释时，它将评估为：

border: 1px solid black;;

您可能将第二个分号放在那里作为完成 JavaScript 语句的反射，但此时它实际上是纯文本。出于某种原因，当您将该行移动到您的答案中时，您最终删除了多余的字符并且没​​有注意到它。