import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import Paper from "@material-ui/core/Paper"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; import ListAltIcon from "@material-ui/icons/ListAlt"; import AccessAlarmIcon from "@material-ui/icons/AccessAlarm"; import AnnouncementOutlinedIcon from "@material-ui/icons/AnnouncementOutlined"; export default function IconTabs() { const [value, setValue] = React.useState(0); const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => { setValue(newValue); }; return ( <Paper square style={{ position: "fixed", width: "100%", bottom: "0" }}> <Tabs value={value} onChange={handleChange} variant="fullWidth" indicatorColor="primary" textColor="primary" aria-label="icon tabs example" > <Tab icon={<AccessAlarmIcon />} /> <Tab icon={<ListAltIcon />} /> <Tab icon={<AnnouncementOutlinedIcon />} /> </Tabs> </Paper> ); }
上記のようにMaterial-UIからTabsのコードを持ってきて貼っつけたら下記のようなエラーで発生しました
Warning: Prop `className` did not match. Server: "PrivateTabIndicator-root-5 PrivateTabIndicator-colorPrimary-6 MuiTabs-indicator" Client: "PrivateTabIndicator-root-1 PrivateTabIndicator-colorPrimary-2 MuiTabs-indicator" in span (created by ForwardRef(TabIndicator)) in ForwardRef(TabIndicator) (created by WithStyles(ForwardRef(TabIndicator))) in WithStyles(ForwardRef(TabIndicator)) (created by ForwardRef(Tabs)) in button (created by ForwardRef(ButtonBase)) in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase))) in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Tab)) in ForwardRef(Tab) (created by WithStyles(ForwardRef(Tab))) in WithStyles(ForwardRef(Tab)) (at Tabs.tsx:29) in div (created by ForwardRef(Tabs)) in div (created by ForwardRef(Tabs)) in div (created by ForwardRef(Tabs)) in ForwardRef(Tabs) (created by WithStyles(ForwardRef(Tabs))) in WithStyles(ForwardRef(Tabs)) (at Tabs.tsx:21) in div (created by ForwardRef(Paper)) in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper))) in WithStyles(ForwardRef(Paper)) (at Tabs.tsx:20)
正直、エラー箇所を何個か消したりしたのですが、一向に解決できません。
もし解決策をご存知でしたらよろしくお願いします・
あなたの回答
tips
プレビュー