3

I'm trying to create infinity rotating for an image (img tag) using built in styled component implementation from MUI (before it was implemented on external library).

Here is my fragment of code. If I'm running it I have an error.

export const SearchPreloaderContainerDiv = styled('div')({
  margin: '0 auto',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  flex: 1,

  '& h4': {
    margin: '50px 0 0 0',
    color: '#282828',
    fontFamily: 'Cuprum',
    fontStyle: 'normal',
    fontSize: '43px',
    lineHeight: '70px',
  },

  '@keyframes loader': {
    from: {
      transform: 'rotate(0deg)',
    },
    to: {
      transform: 'rotate(360deg)',
    },
  },

  '& img': {
    padding: '20px',
    boxSizing: 'border-box',
    animation: 'loader linear 3s infinite',
  },
});

enter image description here

Before it was implemented using keyframes helper from external styled-componet library but now I can not find similar helper in MUI

Ivan Banha
  • 753
  • 2
  • 12
  • 23
  • Styled-components can still do this, and *should* be compatible with other react components, even those from MUI. Can you provide your entire styled component code so we see what you're working with? – Drew Reese Jul 02 '20 at 05:03
  • Just updated the post – Ivan Banha Jul 02 '20 at 05:09
  • What version of styled components are you using? The syntax has changed a bit from what you have. [Edit]Just realized it appears you are using MUI's `styled` function vs react styled-component's `styled` function. – Drew Reese Jul 02 '20 at 05:13
  • Yes, this is the latest MUI styled function imported from ```import styled from '@material-ui/core/styles/styled'; ``` – Ivan Banha Jul 02 '20 at 05:52
  • 1
    Does https://stackoverflow.com/questions/58948890/how-to-apply-custom-animation-effect-keyframes-in-materialui-using-makestyles help answer your question? Are you still using react styled-components at all, or MUI strictly? – Drew Reese Jul 02 '20 at 05:56
  • This solution work fine for me. Thanks. Actually, I decided to use only one solution for styled components because of performance and bundle size. – Ivan Banha Jul 02 '20 at 06:05
  • Cool, glad it's resolved. Yeah, I find styled-components' API a little easier to work with, but it can get tricky when you start introducing other, already styled/themed, component libraries, like MUI, but we've managed to get them to play nice together, probably at the expense of bundle-size. – Drew Reese Jul 02 '20 at 06:10

0 Answers0