LoginSignup
0
0

More than 1 year has passed since last update.

【MaterialUI】Warning: Failed prop type: Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.の解決方法

Posted at

症状

MaterialUIのBadgeコンポーネントを使用したとき、下記のメッセージが表示されました。 翻訳すると、「失敗したプロップ タイプ: Material-UI: `overlap="rectangle"` は廃止されました。代わりに `overlap="rectangular"` を使用してください。」でした。
error
Warning: Failed prop type: Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.
    at Badge (http://localhost:3001/static/js/bundle.js:22979:35)
    at WithStyles (http://localhost:3001/static/js/bundle.js:40210:31)
    at span
    at button
    at ButtonBase (http://localhost:3001/static/js/bundle.js:23656:22)
    at WithStyles (http://localhost:3001/static/js/bundle.js:40210:31)
    at IconButton (http://localhost:3001/static/js/bundle.js:26880:27)
    at WithStyles (http://localhost:3001/static/js/bundle.js:40210:31)
    at div
    at div
    at Toolbar (http://localhost:3001/static/js/bundle.js:34889:23)
    at WithStyles (http://localhost:3001/static/js/bundle.js:40210:31)
    at header
    at Paper (http://localhost:3001/static/js/bundle.js:31106:23)
    at WithStyles (http://localhost:3001/static/js/bundle.js:40210:31)
    at AppBar (http://localhost:3001/static/js/bundle.js:22556:23)
    at WithStyles (http://localhost:3001/static/js/bundle.js:40210:31)
    at div
    at MaterialUIPrivateHeader (http://localhost:3001/static/js/bundle.js:2860:19)
    at ThemeProvider (http://localhost:3001/static/js/bundle.js:39310:24)
    at Router (http://localhost:3001/static/js/bundle.js:98040:30)
    at BrowserRouter (http://localhost:3001/static/js/bundle.js:97555:35)
    at App (http://localhost:3001/static/js/bundle.js:104:78)

解決方法

warn通りに、Badgeコンポーネントにoverlapを渡すと、warnが出なくなりました。
//これを
<Badge></Badge>

//こうした
<Badge overlap="rectangular"></Badge>

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0