FujjimaBlog

Material-UIのSelect内のテキスト部分のスタイルをいじる

2021/02/13 18:19

<h3>したいこと</h3> Material-UIのSelect<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>内にあるテキスト部分のスタイルを変更したかった。具体的には、下図のようにテキストエリアの範囲を縮小したかった。 変更前 <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210208/20210208121616.png" alt="f:id:fujjima:20210208121616p:plain" title="" class="hatena-fotolife" itemprop="image"> 変更後 <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210208/20210208121722.png" alt="f:id:fujjima:20210208121722p:plain" title="" class="hatena-fotolife" itemprop="image"> <h3>タグ構造</h3> Select周りの構造は下記の通りになっているとする。今回「ここから〜ここまで」で囲まれている範囲のスタイルを変更することを目的とした。該当部分のReact<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>も記載しているが、jsx用の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>ハイライトを当てていないので、雰囲気でおなしゃす。 <pre class="code lang-html" data-lang="html" data-unlink> <div class="MuiInputBase-root MuiOutlinedInput-root makeStyles-statusMenu-16">  <div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="demo-simple-select-filled" id="demo-simple-select-filled" > 未着手 </div>  <input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" value="waiting" /><svg class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined" focusable="false" viewBox="0 0 24 24" aria-hidden="true" > <path d="M7 10l5 5 5-5z"></path> </svg> <fieldset aria-hidden="true" class="PrivateNotchedOutline-root-29 MuiOutlinedInput-notchedOutline" style="padding-left: 8px" > <legend class="PrivateNotchedOutline-legend-30" style="width: 0.01px"> <span><200b></span> </legend> </fieldset> </div> </pre> <pre class="code lang-javascript" data-lang="javascript" data-unlink><Select id="demo-simple-select-filled" value={task.status} variant="outlined" className={classes.statusMenu} > <MenuItem value="waiting">未着手</MenuItem> <MenuItem value="working">作業中</MenuItem> <MenuItem value="completed">完了</MenuItem> <MenuItem value="pending">保留</MenuItem> </Select> </pre> <h3>方法</h3> <code>MenuItem</code>のinput部分の<code>MuiOutlinedInput-input</code>に対してスタイルを設定する <pre class="code lang-css" data-lang="css" data-unlink>statusMenu: { '& .MuiOutlinedInput-input': { paddingBottom: '7px', paddingTop: '7px', }, }, </pre>