【React】MUI DataGridのToolbarのデザインを変えてみる

2023年1月19日

一般的に何と呼ぶのかわかりませんが、いわゆるこの部分のこと。

これ非常に便利で、個人的にはとても好きです。

なのですが、どうもデザインを変えるようなプロパティが用意されてない。
（あるのかもしれないが）

文字の大きさも変えれないようなので、こういった部分は不便ですね。

で、このデザインを変えてみたいという話。

コンソールで見ると、HTML的にはこうなってるっぽい。

と、いうことは、、

スタイルシートでこんなのを書くと変わると思う。

.MuiDataGrid-toolbarContainer button {
    font-size: 50px;
}

思い通り文字サイズが変わりました。

ですが、これでは横のアイコンが小さいままなので違和感がある。
で、また詳しく見て見ると、こんな感じになってる。

どうも、アイコンはsvgで出してるっぽい。

ということは、こうすると変わると思う。

.MuiDataGrid-toolbarContainer svg {
  font-size: 50px;
}

なんか一部しか変わってない。どゆこと。。。

あまり使いたくないですが、!importantを使ってみる。

.MuiSvgIcon-root {
    font-size: 50px !important;
}

これで変わった。

少し遊んでみる。

.MuiDataGrid-toolbarContainer button {
  padding: 1rem 2rem;
  color: #fff;
  border-radius: 10px;
  background-image: -webkit-gradient(linear,　left top,　right top,　from(#f83600),　to(#f9d423));
  background-image: -webkit-linear-gradient(left, #f83600 0%, #f9d423 100%);
  background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}

CSSはこちらから拝借。

オシャレになった。

ただ、リスト内までは変わらないっぽい。まあそんなもんか。

あんまり需要無い気もしますが、スタイルシートで色々できそうですね。

てきとうにいろいろプログラミング

Posted by boku