常連

### 前提・実現したいこと

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 中央揃えができない

### 実現したいこと

Material React Table V3.2.0を使用しているテーブルのオプションにenableRowSelection: trueに設定。
これにより表示されるチェックボックスのチェンジイベントでサーバー処理を行おうとした手前
そもそも、チェックボックスにチェックがつかない事象が発生しました。
HTMLの動きをみると、再描画の更新が走っていないことがわかりました。
特にコンソール上エラーは発生していません。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-02-20/48da0d6a-ff2a-4448-af97-2399de6f75b5.png)

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

下記ソースコードよりヒントを頂ければ嬉しいです

```tsx
'use client'

import React, { useState, useCallback , useRef } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_Row,
  type MRT_TableInstance,
} from 'material-react-table';

const data = [ // サンプルデータ
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Doe', age: 30 },
  { id: 3, name: 'Peter Pan', age: 18 },
];

const App = () => {
  const [rowSelection, setRowSelection] = useState({});

  const handleCheck = useCallback(
    (row: MRT_Row<any>, table: MRT_TableInstance<any>, checked: boolean) => {
      console.log("Event:",row);

      const newSelection = { ...rowSelection};
      newSelection[row.id] = checked;

      console.log("RowSelection:",rowSelection);
      console.log("NewSelection:",newSelection);

      setRowSelection(newSelection);// ここで再描画されることを期待してる
    },    
    [rowSelection],
  );

  const columns = [ // カラム定義
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'age',
      header: 'Age',
    },
  ];

  const table = useMaterialReactTable({
    columns,
    data,
    enableRowSelection: true, // 行選択機能を有効にする
    muiSelectCheckboxProps: (props) => ({
      onChange: (event, checked) => {
        handleCheck(props.row, props.table, checked);
      },
    }),
  });

  return (
    <MaterialReactTable table={table} />
  );
};

export default App;
```

### 補足情報（FW/ツールのバージョンなど）

material-react-table: ^3.2.0
@mui/material: ^6.1.8
@mui/material-nextjs: ^6.1.8


Material React Table V3.2.0、Next JS ：チェックボックスにチェックがつかない（再描画されない）

仕事の都合で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と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の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の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",

Material UIのTextFieldのdefaultValueについて

ログインのビューを作る際に、作ったコード
```js
import React from 'react'
import TextField from 'material-ui/TextField'


const Login = () =>
  <div>
    <TextField
      hintText='UserID'
      floatingLabelText='UserID'
      email=this.refs.input.getValue()
    />
    <br />
    <TextField
      hintText='Password Field'
      floatingLabelText='Password'
      type='password'
      password=value
    />
  </div>

  firebase.auth().signInWithEmailAndPassword(email, password)

export default Login
```

やりたかったこと
---


textfieldで受け取った各値を
  firebase.auth().signInWithEmailAndPassword(email, password)
のemail,passwordに代入したいです。

これができないのはjsの基礎知識量の問題かもしれません。


ついでに
---

これを実行するとテキスト入力が左にぎっちり密着します。これらの位置の調整の仕方も知りたいです。