質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

5815閲覧

materialUIの要素(checkbox)のサイズ変更ができない

moriman

総合スコア615

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2019/08/18 04:12

編集2019/08/18 23:54
class CheckAndReset extends React.Component{ constructor() { super() this.state = { open: false } } handleToggle() { this.setState({ open: !this.state.open }) } render(){ const{Button,Checkbox}=MaterialUI; return( <div> <div>Hello.everyone!!!!!</div> リセットする。→ <Checkbox disableRipple={false} value="checkedA" inputProps={{ 'aria-label': 'Checkbox A' }} onChange={()=>this.handleToggle()} style={{width: 50,height: 50}} /> {this.state.open ? <div> <p>リセットボタンを押すと全てのカウントがリセットされます。</p> <p>よろしければ押してください。</p> <Button variant="contained" color="primary" style={{fontSize: '4em'}}> カウントリセット </Button> </div> : null} </div> ) } }

react.jsのmaterialUIをいろいろ試していまして、チェックボックスやボタンの大きさを変えたいです。
上記コードで試してみると、ボタンの文字(「カウントリセット」)のサイズは変わったのですが、チェックボックスの大きさが全く変化しません。

指定の仕方が間違っているでしょうか?あとmaterialUI公式ページ
https://material-ui.com/api/checkbox/
を見てもいまいち指定の仕方がはっきりしないのですが、css周りの操作など基本的なmaterialUIの使い方についてまとまってるサイト・書籍などありますでしょうか?

追記:すべてのソースを以下に示します。

<html> <head> <meta http-equiv="content-type" charset="utf-8"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root">root</div> <script type="text/babel"> class CheckAndReset extends React.Component{ constructor() { super() this.state = { open: false } } handleToggle() { this.setState({ open: !this.state.open }) } render(){ const{Button,Checkbox}=MaterialUI; return( <div> <div>Hello.everyone!!!!!</div> リセットする。→ <Checkbox disableRipple={false} value="checkedA" inputProps={{ 'aria-label': 'Checkbox A' }} onChange={()=>this.handleToggle()} style={{width: 50,height: 50}} /> {this.state.open ? <div><p>リセットボタンを押すと全てのカウントがリセットされます。</p> <p>よろしければ押してください。</p><Button variant="contained" color="primary" style={{fontSize: '4em'}}> カウントリセット </Button></div> : null} </div> ) } } ReactDOM.render(<CheckAndReset />,document.getElementById('root')); </script> </body> </html>

2019/8/19/8:51追記

<html> <head> <meta http-equiv="content-type" charset="utf-8"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root">root</div> <script type="text/babel"> class CheckAndReset extends React.Component{ constructor() { super() this.state = { open: false } } handleToggle() { this.setState({ open: !this.state.open }) } render(){ const{Button,Checkbox}=MaterialUI; return( <div> <div>Hello.everyone!!!!!</div> リセットする。→ <Checkbox disableRipple={false} value="checkedA" inputProps={{ 'aria-label': 'Checkbox A' }} onChange={()=>this.handleToggle()} icon={<CheckBoxOutlineBlankIcon style={{ fontSize: 50 }} />} checkedIcon={<CheckBoxIcon style={{ fontSize: 50 }} />} /> {this.state.open ? <div><p>リセットボタンを押すと全てのカウントがリセットされます。</p> <p>よろしければ押してください。</p><Button variant="contained" color="primary" style={{fontSize: '4em'}}> カウントリセット </Button></div> : null} </div> ) } } ReactDOM.render(<CheckAndReset />,document.getElementById('root')); </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gentaro

2019/08/18 04:21

ソースはimportから全部貼ったほうが良いです。 あとnpmでインストールしているライブラリを列挙するか、package.jsonの中身を貼るか。
moriman

2019/08/18 04:28

昨日に引き続きありがとうございます。 昨日create-react-appですると言っておいてあれなんですが、 とりあえず動き(サイズ変化できるか)を見たかったので 昨日と同じようにcdnでやっています。
gentaro

2019/08/18 04:31

であれば余計に全部書いた方がいいんですよ。 ほとんどの人がNode.js使ってる前提で考えると思うので「xxxのパッケージがないからnpmでインストールしてください」みたいな回答が来て、cdnのURLがわからない場合に詰みます。(回答が無駄になったり二度手間になったりする)
gentaro

2019/08/18 04:33

全部書いたほうがいい=追記された方の内容を最初から載せておくべき、って意味ね。
moriman

2019/08/18 04:34

そうですよね。ありがとうございます。
guest

回答2

0

ベストアンサー

checkboxのstyleで指定するんじゃなくて、iconとcheckedIconにそれぞれ新しい要素を作って突っ込むみたい。(fontSizeいじると変わる)
https://github.com/mui-org/material-ui/issues/10781

JavaScript

1 <Checkbox 2 style={{ width: 36, height: 36 }} 3 icon={<CheckBoxOutlineBlankIcon style={{ fontSize: 20 }} />} 4 checkedIcon={<CheckBoxIcon style={{ fontSize: 20 }} />} 5 />

投稿2019/08/18 05:46

編集2019/08/18 05:48
gentaro

総合スコア8949

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moriman

2019/08/18 23:55

回答をいただきましてありがとうございます。 頂いた回答に沿って修正して動かしてみたのですが react-dom.development.js:22842 Uncaught ReferenceError: CheckBoxOutlineBlankIcon is not defined at CheckAndReset.render (<anonymous>:59:32) のようなエラーが出ます。 修正後の全コードは質問欄に追記いたしました。
gentaro

2019/08/19 00:29

あらら。 参考にしたやつを見ると import Checkbox from "material-ui/Checkbox"; import CheckBoxOutlineBlankIcon from "material-ui-icons/CheckBoxOutlineBlank"; import CheckBoxIcon from "material-ui-icons/CheckBox"; となってて、別パッケージから読み込むみたいなんで、たぶんCDNで読んでるライブラリでは公開されておらず、利用する術がないですね。確認不足でした。 (一応内部には持ってるのは確認したけどexportされてない) こうなるとお手上げなんで、Node.js環境で確認されると良いかと。
gentaro

2019/08/19 04:59 編集

あと荒業ですけど 1. https://unpkg.com/@material-ui/core@4.3.2/umd/material-ui.development.js をローカルに落としてきて、 <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script> で参照してる物と差し替える HTMLと同階層に保存してるなら <script src="./material-ui.development.js"></script> みたいな 2. material-ui.development.jsの中身で最後にexportしてるところに次の2行追加 exports.CheckBoxIcon = CheckBoxIcon; exports.CheckBoxOutlineBlankIcon = CheckBoxOutlineBlankIcon; 3. 質問文のソース(最後に追記されてるやつ)の以下の部分の修正 修正前:const{Button,Checkbox}=MaterialUI; 修正後:const{Button,Checkbox,CheckBoxIcon,CheckBoxOutlineBlankIcon}=MaterialUI; でできないこともないです。 まぁかなり力技なんで、やっぱりCDNでやるのは限界がある気が。
moriman

2019/08/21 02:09

丁寧な回答を頂きましてありがとうございました。 これはこれとして、create react Appでやってみようと思います。
guest

0

js

1style={{width: '50px',height: '50px'}} 2

こんなかんじですかね?

投稿2019/08/18 05:17

Nippun

総合スコア1147

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gentaro

2019/08/18 05:51

これだとたぶん(少なくともchrome,firefoxでは)質問文のコードと結果が変わらず、checkboxを取り囲むspanのサイズだけ変わって余白ができます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問