常連

material uiとreactjsにて、ウェブアプリの作成をしています。


現在、作成した機能を中央揃えしたく、試行錯誤しましたが、一向に中央揃えにならず、質問した次第です。

中央揃えしたい例：
```js
            <div>
              <Card>
              <CardTitle title='Make new post'  subtitle={this.state.username} />
                <CardText>
                  <p>
                  <TextField
                    id="post_title"
                    floatingLabelText="type the title"
                    value={this.state.post_title}
                    onChange={this.handleChange_title}
                    />
                  <br />
                  <TextField
                    floatingLabelText="type the body"
                    multiLine={true}
                    value={this.state.post_body}
                    onChange={this.handleChange_body}
                    multiLine={true}
                    rows={2}
                    />
                  <br />
                  <RaisedButton
                    label="posting"
                    secondary={true}
                    onClick={this.handleSubmit}
                    />
                  <br />
                  </p>
                </CardText>
              </Card>
            </div>
```

この部分を中央揃えにするには、どのようにcssを記述し、importし、どこのタグにどう書き込めばいいかを教えていただけると幸いです。

参考までに現在の配置状態は
![イメージ説明](bcd1bb8fca5c1c9580739d2125c0f766.png)
このような状態です。

コンポーネントの中央揃えの方法。　material ui on Reactjs。

### 前提・実現したいこと

material uiを使って入力フォームを作成していましたが、フォームの中央揃えができません。
Gridを使いましたが思うように実装できませんでした。
解決方法をご存知の方、教えていただきたいです。

### 発生している問題・エラーメッセージ
ボタンは中央揃えできているがフォームの中央揃えができていない。
![イメージ説明](72c1dbc180a30b346920c8b69dd1e189.png)

### 該当のソースコード

```react.js
return (
    <React.Fragment>
          <Grid container spacing={3} alignItems="center" justify="center">
            <Grid item xs={12}>
              <TextField
                id="standard-basic"
                name="name"
                label="名前"
                value={values.name}
                onChange={handleInputChange}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id="date"
                label="date"
                type="date"
                name="date"
                sx={{ width: 220 }}
                InputLabelProps={{
                  shrink: true,
                }}
                format="yyyy/MM/dd"
                value={values.date}
                onChange={handleInputChange}
              />
            </Grid>
            
            <Grid item>
              <Button
                variant="contained"
                color="secondary"
                startIcon={<SaveIcon />}
                onClick={submit}
              >保存する
              </Button>
              <Button
                variant="contained"
                color="primary"
                startIcon={<SaveIcon />}
                onClick={() => {
                  props.setFlag(false)
                }}
              >戻る
              </Button>
            </Grid>
          </Grid>
    </React.Fragment>
)

```

### 試したこと
Gridでcontanerとjustifyにcenterを与える
https://teratail.com/questions/98504

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

material ui 中央揃えができない

## テーマ、知りたいこと

VSCodeはかなり優秀なコードエディタですが、そのUIについてどのライブラリが使用されているのか気になりました。

## 背景、状況

検索してもVSCodeの使い方やらなんやらのクソ記事がGoogleの3ページ目までは占領していたので、ここでご存じの方に聞く方が早いかと思い質問させていただきます。

個人的には、Bootstrap,Bulma,MaterialUI,Ant Designのどれかと思ったのですが、確証はないためよくわかりません。

なぜこんなこと気になったのかというと、Webアプリケーションを作る上であのファイルビュー機能などが参考になるかと思ったためです。

ご存じの方がいらっしゃいましたら、何卒よろしくお願いします。



VSCodeが使用しているライブラリが知りたい(UI部分)

仕事の都合でReactを初めまして、Material-UIの使い方がよく分かっておりません、、
やりたいこととしては、SNSの「いいねボタン」に似たものを作ることです。

MaterialUIのサイトから持ってきたハートアイコンを使おうと思います。
それをボタンとしての役割にする方法が分からず質問です。

# 実際に書いたコード
最初は
```SnsList.js
import React, { Component } from 'react';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';

class Sns extends Component {
  render() {
    return(
        <FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/>
    );
  }
}
```
でしたが、当然ただアイコンが表示されただけでしたので、buttonタグで囲みました。
```React
import React, { Component } from 'react';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';

class Sns extends Component {
  render() {
    return(
        <button><FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/></button>
    );
  }
}
```
この実行結果が以下の写真となります（左のゴミ箱マークは今回は質問対象外です）
![イメージ説明](2f2b50fbc495ce8eb25b10c61bc832c1.png)

# 実現したいこと

**ハートアイコンそのものをボタンとして機能させること**

buttonタグを使うと、ハートアイコンはボタンとして処理できるのですが、これをハートアイコンだけにするにはどうすれば良いでしょうか（ハートを囲っているグレー部分を無くす）

これを押すと右側にいいねの数をカウントしていきたいと思っています。

# 補足

※stateはApp.jsで保持しており、
```
onClick = {() => this.props.SnsPost()}
```
の
```
SnsPost()
```
はApp.jsファイルで定義します。

また、Firebaseやreduxなどは使用しません。

ご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。

# 解決したコード

回答いただいたbuttonタグにonClick処理を書き込みました。

一度失敗した例
```React
<button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></button>
```
これだと変わらずグレーの四角に囲まれたままでした。

Buttonで解決しました。
```React
import { Button } from '@material-ui/core';

<Button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></Button>
コード
```
左のゴミ箱マークはただのアイコンなので少し位置がずれていますが、マウスを当てたらグレーがかります。
マウスあてる前↓
![イメージ説明](61542d5c50fa16eef2e2b19407630e6d.png)
マウスあてた時↓
![イメージ説明](0eecff6e07c981126c354ef8cec35657.png)

React：Meterial-UIを使ったクリック処理

＜現状＞
現在、Material-UIのTextFieldコンポーネントの初期値を消すことができなく、困っています。
defaultValueをセットしてみたり色々試しましたが、うまく行きません。宜しくお願いします。

＜実現したいこと＞
①Material-UIのTextFieldで数値を扱いたい
②Material-UIのTextFieldの初期値を0にセットしたい
③Material-UIのTextFieldの値を削除して、新規の値を入力したい
④Material-UIのTextFieldの値を0にするクリアボタンを作成したい

＜コード>
```js
import React from 'react'
import TextField from '@material-ui/core/TextField'

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        d1: 0
    }
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: Number(event.target.value)
    })
  }

  handleClear = () => {
    this.setState({
        d1: 0
    })
  }

 render(){
  <div>
    <TextField
     type="number"
     name="d1"
     InputLabelProps={{
      shrink: true,
     }}
     margin="dense"
     value={this.state.d1}
     onChange={this.handleChange}
    />
    <Button onClick={ this.handleClear }>
      クリア
    </Button>
  </div>
```

Material-UIのTextFieldコンポーネントの初期値を消すことができない

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Reactでchat機能を作成しています。
material-uiからコピーして貼り付けたところ以下のエラーが発生しました。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
Module not found: Can't resolve '@mui/material/Avatar' in '/Users/******/practice/chatbot-demo/src/components'

### 該当のソースコード

import React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';

const Chats = () => {
  return (
    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
      <ListItem alignItems="flex-start">
        <ListItemAvatar>
          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
        </ListItemAvatar>
        <ListItemText
          primary="Brunch this weekend?"
          secondary={
            <React.Fragment>
              <Typography
                sx={{ display: 'inline' }}
                component="span"
                variant="body2"
                color="text.primary"
              >
                Ali Connors
              </Typography>
              {" — I'll be in your neighborhood doing errands this…"}
            </React.Fragment>
          }
        />
      </ListItem>
    </List>
  )
}

export default Chats
```ここに言語を入力
コード
```

### 試したこと

調べて下記を実行しました。
npm install @material-ui/core
npm install @material-ui/icons

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

material-ui でのModule not found

### 実現したいこと

ReactのMaterial-UIを利用しWebアプリケーションを作成しており、スマホ対応をしようとしています。
そこで、レスポンシブ対応をしようとしているのですが、ChromeのDeveloper Toolで見た時の表示がおかしくなる理由が分からずご教授いただけると嬉しいです。

### 前提
技術スタック
Ruby on Rails 
TypeScripot
Material-UI
React


### 発生している問題・エラーメッセージ

以下の画像のように、Chromeのディベロッパーツールを用いてスマホサイズを指定した際に、PCの縮小版のように表示されます。スマホ実機で見た際もこのような表示になります。

![PCサイトの縮小版になる](c15ecd199f00c438e2997e9886586ea2.png)

一方、スマホサイズ指定ではなく、だんだんと幅を狭くしていくと以下のように表示されます。こちらは、本来理想の表示のされ方だと思うのですが、実機ではこのように表示されません。
![画像](8a903d6201a07e10e9c7f100a1243506.png)


[Material-UIの公式サイト](https://material-ui.com/components/drawers/#drawer)のPersistent drawerとほぼ同じようにApp Barを書いており、公式サイトではスマホサイズにしたときに、適切な理想形で表示されるのですが、私のAppでは表示されず、その違いが何なのかわかりません。
公式サイトの、Persistent drawerのコードでもスマホ対応しているようなコードは見当たりません。

**以下公式サイトでのスマホ表示**

![公式サイト](eeafb73afa45a24694929ecadcea0d01.png)

### 該当のソースコード

**ThemeTemplate.tsx**
```TypeScript
import * as React from "react"
省略

const theme = createMuiTheme({
  省略
})

type Props = {
  children: React.ReactNode
}

const ThemeTemplate: React.FC<Props> = ({ children }: Props) => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  )
}

export default ThemeTemplate

```


**Viewファイルのreturnの中身**
```TypeScript
return (
    <ThemeTemplate>
      <div className={classes.bar}>
        <AppBarComponent isSignedIn={props.isSignedIn}/>
        <main className={classes.content}>
          <div className={classes.toolbar}/>
          <Container>
            <Box mb={2}>
              <Box>
                <Box mb={2}>
                  <Typography component="h2" variant="h4">
                    売り上げ
                  </Typography>
                </Box>
                <Paper className={classes.tablePaper}>
                 省略
                </Paper>
              </Box>
```

### 試したこと


公式サイトと同じ書き方をしているのに、AppBarまで縮小されて表示される原因は、大元であるThemeTemplateにあるのではないかと考えているのですが、糸口が見えず。。

React初心者で稚拙な質問で恐縮ですが、ご教授いただけますと幸いです。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

React, Material-UIでレスポンシブ対応したいが、PCの縮小版のように表示される

### 前提

reactでMaterial UIのTextFieldを使って開発しています。
TextFieldのdefaultValueという属性を使用したいのですが、一方はうまくいっているのに対して、他方はうまくいっておりません。
コードが長すぎるため、必要だと思うところのみコードを載せますので、載せていない部分のコードが必要であれば教えてください。

label="お客様コード" の方のTextField だとdefaultValueを設定できるが、label="担当者"の方のTextFieldのdefaultValueが設定できません。

Material UIのdefaultValueのドキュメントをみると、「Use when the component is not controlled」と書かれているが、それが原因なのでしょうか？よくわからず困っています。

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- TextFieldにdefaultValueを設定したい

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```test.jsx

import { NohinHeaderContext } from '../../providers/setNohinHeaderProvider';
import { useGetNohinHeaderInfo } from '../../../hooks/useGetNohinheaderInfo';
import {TextField} from '@mui/material';

 const { nohinHeader, setNohinHeader } = useContext(NohinHeaderContext);

 useGetNohinHeaderInfo();

export const test =() =>{

return(
 <TextField variant="standard" label="自社担当者" sx={{ m: 1 }}
  defaultValue={nohinHeader.representative} /> ★
                       
); 
}

```

```useGetNohinheaderInfo.js
import { useContext, useEffect } from "react";
 import {NohinHeaderContext} from '../components/providers/setNohinHeaderProvider';

export const useGetNohinHeaderInfo =() =>{
    
     const {nohinHeader, setNohinHeader}=useContext(NohinHeaderContext);
     let newData = {};
    useEffect(() => {
        fetch('getnohinheaderinfo.php', { method: 'POST', mode: 'cors', credentials: 'include' }
        )
            .then(response => {
                if (!response.ok) {
                    throw new Error(`${response.status} ${response.statusText}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('** fetch: then(data)');
                console.log(data);                               
                newData={indexno:data.index_no,voucherno:data.voucher_no,customerid:data.customer_id,issueddate:data.issued_date,
                    representative:data.representative,taxr:data.tax_r,taxs:data.tax_s,subtotals:data.subtotal_s,subtotalr:data.subtotal_r,
                    taxamounts:data.tax_amount_s,taxamountr:data.tax_amount_r,totalnotax:data.total_notax,taxamount:data.tax_amount,totalamount:data.total_amount}
                 setNohinHeader(newData); 
            })
            .catch((reason) => {
                console.log('** fetch: catch');
                console.log(reason);
            });
    }, []);

    return true;
}
```

```setNohinHeaderProvider.jsx

import { createContext, useState } from "react";

export const NohinHeaderContext = createContext({});

export const SetNohinHeaderProvider = props => {
  const { children } = props; 

  const [nohinHeader, setNohinHeader] = useState({      
        indexno:"",voucherno: "", customerid: "", issueddate: "", representative: "", 
        taxr: "",taxs:"",subtotals:"",subtotalr:"",taxamounts:"",taxamountr:"",
        totalnotax:"",taxamount:"",totalamount:"",    
  });

  return (
    <NohinHeaderContext.Provider value={{ nohinHeader, setNohinHeader}}>
      {children}
    </NohinHeaderContext.Provider>
  );

};

```



### 試したこと
★のTextFieldに対してdefaultValueではなくvalue={nohinHeader.representative}とするとカスタムフックから取得した値はきちんと取れてきている。
### 補足情報（FW/ツールのバージョンなど）

 "@mui/material": "^5.10.8",
"react": "^18.2.0",