Стилизованные компоненты в React v5

Question

я обновил стилизованные компоненты с версии 4 до 5, и возникла проблема с тестами:

TypeError: Cannot read property 'large' of undefined

Мой код:

export const Title = styled(FormattedTypography).attrs(() => ({
  component: 'span',
  fontWeight: 'bold',
  fontFamily: 'decorative',
  fontSize: 'display2',
}))`
  margin-bottom: ${(props) => props.theme.spacing.large};
  text-align: center;
`;

Был ли синтаксис изменен или что-то вроде этого ? Я не могу найти информацию.

Answer 1

ПРИМЕЧАНИЕ. Примечание. Синтаксис объекта-формы .attrs ({}), который был объявлен устаревшим в версии v4, удален в версии v5. Вместо этого используйте атрибуты формы функции .attrs (props => ({})) (вы должны были видеть предупреждения консоли, чтобы сделать это обновление раньше времени.) Документы

v5 пример синтаксиса:

const Component = styled.div.attrs(props => ({
  style: { width: `${props.progress}%` }
}))`
  background-color: #f3a42d;
  height: 20px;
  margin: 0;
  padding: 10px;
`

const App = () => {
  return (
    <div className="App">
      <Component progress={70} >70% Progress Bar</Component>
    </div>
  )
}

ReactDOM.render( <App /> , document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- only for SOF snippets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.js"></script>
<div id="root"></div>

См. Дополнительные примеры в стиле styled-components .attrs api