Nivo Charts wont animate if it is inside a styled() MUI component

[KissBalazs]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://stackblitz.com/edit/react-ts-qm2e32?file=App.tsx

Current behavior 😯

Nivo charts won't animate and noticeable flickers upon data update inside a styled MUI component.

Expected behavior 🤔

To be able to animate the Nivo chart inside a styled MUI component.

Context 🔦

I understand that Nivo chart is a different library, but this felt like the roots of the issue is in MUI. As far as I know, I am using the tool as it is supposed to be, but upon wrapping it with a mui styled() component, it breaks the tool.

Your environment 🌎

see stackblitz example

[sai6855]

hey @KissBalazs the problem is you have declared StyledTable inside App function, so every time state changes inside App new StyledTable function is created. Since new StyledTable is created everytime, react unmounts and remounts children inside StyledTable, because of this unmount->remount->unmount behavoiur you re seening flickering behaviour.

To fix this just create StyledTable outside App.

import './style.css';

const StyledTable = styled(Table)(({ theme }) => ({
  background: 'gray',
}));

export default function App() {
  const [testData, setTestData] = React.useState<any>(50);

  function generateNewdata() {
    setTestData(Math.floor(Math.random() * 100));
  }

working example: https://stackblitz.com/edit/react-ts-jrzrc2?file=App.tsx

[KissBalazs]

Thank you @sai6855 so much for the clear answer. I learned something new again about React!