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>
ソースはimportから全部貼ったほうが良いです。
あとnpmでインストールしているライブラリを列挙するか、package.jsonの中身を貼るか。
昨日に引き続きありがとうございます。
昨日create-react-appですると言っておいてあれなんですが、
とりあえず動き(サイズ変化できるか)を見たかったので
昨日と同じようにcdnでやっています。
であれば余計に全部書いた方がいいんですよ。
ほとんどの人がNode.js使ってる前提で考えると思うので「xxxのパッケージがないからnpmでインストールしてください」みたいな回答が来て、cdnのURLがわからない場合に詰みます。(回答が無駄になったり二度手間になったりする)
全部書いたほうがいい=追記された方の内容を最初から載せておくべき、って意味ね。
そうですよね。ありがとうございます。
回答2件
あなたの回答
tips
プレビュー