Javascript 在样式化组件中使用shouldForwardProp/如何在shouldForwardProp中使用多个筛选器时，伪类不起作用

1-当我在

样式化组件中使用伪选择器时，在使用
with config
stuff之后，应用的伪选择器不知何故不起作用

const Input = styled.input.attrs(({
  type: "number",
  size: 2,
  placeholder: "Your number",
}))`
  color: red;
  text-decoration: none;
  :disabled {
          border: red 20px solid;
      }
  ${({foo, borderWidth}) =>
    foo &&
    css`
      color: purple;
      padding: 0.3rem;
      outline: none;
      border-width: ${borderWidth};
      ::-webkit-inner-spin-button,
      ::-webkit-outer-spin-button {
        -webkit-appearance: none;
      }
      ::placeholder {
        color: purple;
      }
      &:focus {
        border-color: red;
        padding: 0.3rem;
      }
    `}
`;


const Div = styled.div.withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) =>
    !["foo"].includes(prop) && defaultValidatorFn(prop),
})`
  :disabled {
      border: gray 200px solid;
  };
  ${({ foo }) => `
 background-color: ${foo}
 `}
`;

在
输入中
一切正常。另一方面，在呈现的
jsx
元素中调用时，On
Div
：disabled

不起作用。

我发现创建组件的方法过于复杂。我在React和样式化组件方面有4年的经验，创建了多个企业项目，而且我从未使用过

with config

，

attrs

等等。考虑到不要使你的生活复杂化，你可以在JSX中轻松地设置<代码>类型，<代码>大小>代码>和其他道具。我的这个例子不是一个真实的例子。我昨天花了很多时间阅读样式化组件的文档，以便在下一个项目中使用，我的这个问题纯粹是理论性的。我真诚地同意，在现实生活中的项目中，事情必须写得尽可能清楚和简单。在阅读了整个文档之后，我在这里提出了两个关于stack overflow的问题，只是为了更好地理解库中的这些小理论。不幸的是，我只尝试了几次这些函数，我觉得我没有足够的知识来教训其他人。