Why is a mui/system styled svg component giving an args warning?

Question

I'm getting to grips with the transition from MUI v4 -> v5 and having to migrate my styles. It's mostly ok, following the docs, but with one problem: The following component renders perfectly, as I'd expect, but issues a warning to my console...

MUI: the styled("svg")(...args) API requires all its args to be defined.

Which I don't get ("what args??").

Why's the warning happening?

import { styled } from '@mui/system'

const Svg = styled('svg')()

const JaggedSvg = () => (
  <Svg
    sx={{
      position: 'absolute',
      bottom: '0',
      width: '100%',
      height: '75%',
    }}
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    preserveAspectRatio="none"
  >
    <polygon
      fill="white"
      points="0,0 30,100 65,21 90,100 100,75 100,100 0,100"
    />
  </Svg>
)

Answer 1

I'm a v4 user mostly, but based on the docs here https://mui.com/system/styled it seems you might want to change to something like this

import { styled } from '@mui/system'

const Svg = styled('svg')({
  position: 'absolute',
  bottom: '0',
  width: '100%',
  height: '75%',
})

const JaggedSvg = () => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    preserveAspectRatio="none"
  >
    <polygon
      fill="white"
      points="0,0 30,100 65,21 90,100 100,75 100,100 0,100"
    />
  </Svg>
)