Блог

Я смог собрать воедино то , что shouldForwardProp указывает, какие реквизиты должны быть переданы завернутому элементу, переданному в качестве опции styled() , но мне трудно найти понятный пример его использования.

Является ли пересылка реквизита здесь сродни передаче реквизита в React?

Зачем нужно предотвращать пересылку определенных реквизитов в обернутый элемент во время использования styled() ?

Простите меня за мое невежество или если в моем вопросе не хватает ясности — я все еще изучаю MUI и пытаюсь разобраться в этом.

Если вы используете встроенные компоненты, такие как div или span , и вы хотите разрешить пользователю настраивать стили с помощью некоторых реквизитов.

 const MyComponent = styled('div')(({ bgColor }) => ({
  backgroundColor: bgColor,
}));
 

Когда вы используете его таким образом:

 <MyComponent bgColor='red'>
 

Реквизит передается реальному элементу в дереве DOM в качестве атрибута:

И отреагируй пожалуюсь, что-то вроде:

 Warning: React does not recognize the `bgColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bgcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
 

Вот почему shouldForwardProp существует, чтобы предотвратить передачу реквизитов стиля и создание недопустимого атрибута:

 const MyComponent = styled('div', {
  shouldForwardProp: (props) => props !== 'bgColor',
})(({ bgColor }) => ({
  backgroundColor: bgColor,
}));