Блог

Могу ли я в любом случае удалить атрибуты, унаследованные тем styled-component , который был расширен от другого?

Я приведу действительно довольно глупый фрагмент кода, просто чтобы проиллюстрировать, что я имею в виду:

 const FormInput = styled.input.attrs({
  type: "text",
})`
  border-color: blue;  
  color: red;
  ${({$size}) => `
  height: ${$size}rem;
  width: ${$size}rem;
  `}
`;

const Label = styled(FormInput)``
  

type: "text" наследуется Label . Есть ли в любом случае, что я не мог отобразить его в этом случае? Допустим, что я бы сделал <Label as="Label" /> в этом случае

Начиная с версии 5.1, вы можете передавать shouldforwardprop предикат .withConfig() и отфильтровывать свойства, которые вы не хотите отображать:

 const Label = styled(FormInput).withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) =>
      !['type'].includes(prop)
      amp;amp; defaultValidatorFn(prop),
})``;
  

Чтобы отфильтровать несколько свойств, извлеките массив в const :

 const forbiddenProps = ['type', 'placeholder'];

const Label = styled(FormInput).withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) =>
      !forbiddenProps.includes(prop)
      amp;amp; defaultValidatorFn(prop),
})``;