javascript - 使用 shouldForwardProp 时伪类不起作用 / 如何在 styled-components 的 shouldForwardProp 中使用多个过滤器

Question

1 - 当我styled-components在使用东西之后使用伪选择器时withConfig，应用的伪选择器不起作用。

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}
 `}
`;

Input一切正常。另一方面，在渲染元素Div :disabled中调用时 on 不起作用。jsx

标签： javascriptcssstyled-components