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

发布于 2025-01-10 05:12:44 字数 734 浏览 0 评论 0原文

我正在着手处理从 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>
)

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

楠木可依 2025-01-17 05:12:44

我主要是 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>
)

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

回复收藏 0 原文