Material-UIのSelect内のテキスト部分のスタイルをいじる
2021/02/13 18:19
<h3>したいこと</h3> <p>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>内にあるテキスト部分のスタイルを変更したかった。 具体的には、下図のようにテキストエリアの範囲を縮小したかった。</p> <p><b>変更前</b></p> <p><span itemscope itemtype="http://schema.org/Photograph"><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"></span></p> <p><b>変更後</b></p> <p><span itemscope itemtype="http://schema.org/Photograph"><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"></span></p> <h3>タグ構造</h3> <p>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>ハイライトを当てていないので、雰囲気でおなしゃす。</p> <pre class="code lang-html" data-lang="html" data-unlink> <span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"MuiInputBase-root MuiOutlinedInput-root makeStyles-statusMenu-16"</span><span class="synIdentifier">></span> <span class="synComment"><!-- ここから --></span> <span class="synIdentifier"><</span><span class="synStatement">div</span> <span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"</span> <span class="synIdentifier"> </span><span class="synType">tabindex</span><span class="synIdentifier">=</span><span class="synConstant">"0"</span> <span class="synIdentifier"> role=</span><span class="synConstant">"button"</span> <span class="synIdentifier"> aria-haspopup=</span><span class="synConstant">"listbox"</span> <span class="synIdentifier"> aria-labelledby=</span><span class="synConstant">"demo-simple-select-filled"</span> <span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"demo-simple-select-filled"</span> <span class="synIdentifier"> ></span> 未着手 <span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span> <span class="synComment"><!-- ここまで --></span> <span class="synIdentifier"><</span><span class="synStatement">input</span> <span class="synIdentifier"> aria-</span><span class="synType">hidden</span><span class="synIdentifier">=</span><span class="synConstant">"true"</span> <span class="synIdentifier"> </span><span class="synType">tabindex</span><span class="synIdentifier">=</span><span class="synConstant">"-1"</span> <span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"MuiSelect-nativeInput"</span> <span class="synIdentifier"> </span><span class="synType">value</span><span class="synIdentifier">=</span><span class="synConstant">"waiting"</span> <span class="synIdentifier"> /><</span>svg <span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"</span> <span class="synIdentifier"> focusable=</span><span class="synConstant">"false"</span> <span class="synIdentifier"> viewBox=</span><span class="synConstant">"0 0 24 24"</span> <span class="synIdentifier"> aria-</span><span class="synType">hidden</span><span class="synIdentifier">=</span><span class="synConstant">"true"</span> <span class="synIdentifier"> ></span> <span class="synIdentifier"><</span>path<span class="synIdentifier"> d=</span><span class="synConstant">"M7 10l5 5 5-5z"</span><span class="synIdentifier">></</span>path<span class="synIdentifier">></span> <span class="synIdentifier"></</span>svg<span class="synIdentifier">></span> <span class="synIdentifier"><</span><span class="synStatement">fieldset</span> <span class="synIdentifier"> aria-</span><span class="synType">hidden</span><span class="synIdentifier">=</span><span class="synConstant">"true"</span> <span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"PrivateNotchedOutline-root-29 MuiOutlinedInput-notchedOutline"</span> <span class="synIdentifier"> </span><span class="synType">style</span><span class="synIdentifier">=</span><span class="synConstant">"padding-left: 8px"</span> <span class="synIdentifier"> ></span> <span class="synIdentifier"><</span><span class="synStatement">legend</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">"PrivateNotchedOutline-legend-30"</span><span class="synIdentifier"> </span><span class="synType">style</span><span class="synIdentifier">=</span><span class="synConstant">"width: 0.01px"</span><span class="synIdentifier">></span> <span class="synIdentifier"><</span><span class="synStatement">span</span><span class="synIdentifier">></span><200b><span class="synIdentifier"></</span><span class="synStatement">span</span><span class="synIdentifier">></span> <span class="synIdentifier"></</span><span class="synStatement">legend</span><span class="synIdentifier">></span> <span class="synIdentifier"></</span><span class="synStatement">fieldset</span><span class="synIdentifier">></span> <span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span> </pre> <pre class="code lang-javascript" data-lang="javascript" data-unlink><Select id=<span class="synConstant">"demo-simple-select-filled"</span> value=<span class="synIdentifier">{</span>task.<span class="synStatement">status</span><span class="synIdentifier">}</span> variant=<span class="synConstant">"outlined"</span> className=<span class="synIdentifier">{</span>classes.statusMenu<span class="synIdentifier">}</span> > <MenuItem value=<span class="synConstant">"waiting"</span>>未着手</MenuItem> <MenuItem value=<span class="synConstant">"working"</span>>作業中</MenuItem> <MenuItem value=<span class="synConstant">"completed"</span>>完了</MenuItem> <MenuItem value=<span class="synConstant">"pending"</span>>保留</MenuItem> </Select> </pre> <h3>方法</h3> <p><code>MenuItem</code>のinput部分の<code>MuiOutlinedInput-input</code>に対してスタイルを設定する</p> <pre class="code lang-css" data-lang="css" data-unlink>statusMenu: <span class="synIdentifier">{</span> <span class="synConstant">'& .MuiOutlinedInput-input'</span>: { paddingBottom: <span class="synConstant">'7px'</span><span class="synSpecial">,</span> paddingTop: <span class="synConstant">'7px'</span><span class="synSpecial">,</span> <span class="synIdentifier">}</span><span class="synSpecial">,</span> <span class="synError">}</span><span class="synSpecial">,</span> </pre>