为什么 mui/system 风格的 svg 组件会发出 args 警告？

Question

我正在处理从 MUI v4 -> v5 的过渡，并且必须迁移我的样式。按照文档，基本上没问题，但有一个问题：以下组件按照我的预期完美呈现，但向我的控制台发出警告...

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

我不明白（“什么参数？？”）。

为什么会出现警告？

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

我主要是

v4

用户，但根据这里的文档 https://mui.com/system/styled 看来你可能想更改为这样的

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>
)

Answer 2

我有同样的警告，通过简单地传递一个空对象似乎可以解决问题：

const Svg = styled('svg')({})