Blockchain code Metaverse VR

Crypto×VR×SmartContract(490)

スポンサーリンク

//tips

//smart contract

取得したapiデータをきれいに表示できるようにMaterial-UIの使い方を確認していく。

npm install @mui/material @mui/styled-engine-sc styled-components

まずはインストール。

調べていくとNext.jsアプリでMaterial-UIを使うときには下記のファイルに変更が必要とのこと。

_app.js
_document.js

_app.jsはnext.authと組み合わせるとややこしいことになりそう。

https://github.com/mui/material-ui/tree/master/examples/nextjs/pages

まずは新たにプロジェクトを作成し、慣れるまでそちらで動かした方が良さそう。

npx create-next-app material-ui-app --use-npm

プロジェクトを作成し、再度MUIをインストール。

_app.jsと_document.jsで読み込むMaterial-UI全体に適用するtheme.jsを作成。

初期のものにMUIを適用。

参考:

https://amateur-engineer-blog.com/how-to-use-material-ui-with-nextjs/

npm install @material-ui/iconsも追加。

調べていくとTypescriptの説明がメインになっている。

npm install @mui/material @emotion/react @emotion/styled

Module not found: Can't resolve '@material-ui/core’のエラーが消えない。

ここからは気合でmuiのサンプルを見ながらゴリゴリ反応を見ていった。1ページのみだったら_app.jsや_document.jsなどの複数ページ対応のものは不要なのでひたすら使いそうな例を当てはめて見てみた。

https://mui.com/components/drawers/

ざっくり作成。

import * as React from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { Button } from '@mui/material';

//card
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';

//TOPバー
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';

//sideバー
import Drawer from '@mui/material/Drawer';
import CssBaseline from '@mui/material/CssBaseline';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';

const drawerWidth = 240;

export default function Index() {
//<Container maxWidth="sm">
return (

<Container>
<Box sx={{ display: 'flex' }}>
<CssBaseline />

<AppBar
position="fixed"
sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}
>
<Toolbar>
<Typography variant="h6" noWrap component="div">
Permanent drawer
</Typography>
</Toolbar>
</AppBar>

<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
}}
variant="permanent"
anchor="left"
>
<Toolbar />
<Divider />
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>

<Box
component="main"
sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
>
<Toolbar />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus

</Typography>

<Button variant="contained">Hello World</Button>

<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} gutterBottom>
Word of the Day
</Typography>

<Typography variant="body2">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
</Card>

</Box>
</Box>

<Box sx={{ flexGrow: 1 }}>

<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>

</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>

</Box>

<Box sx={{ my: 4 }}>
<Typography variant="h4" component="h1" gutterBottom>
Next.js example
</Typography>

<>
<Button variant="contained">Hello World</Button>

</>

<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
</IconButton>

<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>

<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>

<Typography variant="h1" component="h2">
h1. Heading
</Typography>

<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="div">
belent
</Typography>
<Typography sx={{ mb: 1.5 }} >
adjective
</Typography>
<Typography variant="body2">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>

</Box>
</Container>
);
}

before-auth-appにカムバック。下記エラーの検証。

{ mymedium.map(({author,title},index) => {
return (
<li key={index}>

{ mymedium.map((item,index) => {
return (
<li key={index}>
<p>{ item.author }</p>

などとして、keyを設定し、コンソールのWarning: Each child in a list should have a unique "key" prop.というエラーを解消しようとしたが別の部分が問題だった。

下記のようにリストを外しても、リストがある形で表示させないとwarningが出るよう。

{statuses && (
<>
{ statuses.map(({ key, id_str,text }) => {
return (

<TwitterTweetEmbed
tweetId={id_str}
/>

これでwarningは解決できるが、不要な・が追加されてしまうのが悩みどころ。map()の解説みたが、liで括る必要があることは書かれていなかったのだが不思議。

{ statuses.map((item,index) => {
return (
<li key={index}>
<TwitterTweetEmbed
tweetId={item.id_str}
/>
</li>
);
})}

 

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.