MUI Baseでスタイリングされていない状態のMUIコンポーネントを使う
こんにちは、Gaji-Labo フロントエンドエンジニアの石垣です。
今回は、MUI を使っているなかで MUI Base というものを知ったのでそれをご紹介したいと思います。
MUI Base とは？
MUI Base はスタイリングされていない状態のMUIコンポーネントが揃っているライブラリです。
まだアルファ版ですが、MUI とは独立して使うことができます。
MUIと同様、npm パッケージとして install します。
yarn add @mui/base一例を挙げると、 Button コンポーネントを import すると素の状態ではブラウザデフォルトのスタイルが当たったボタンとして表示されます。
import ButtonUnstyled from '@mui/base/ButtonUnstyled';
export default function MyApp() {
return <ButtonUnstyled>{/* button text */}</ButtonUnstyled>;
}内部的には MUI で使われる class のみが当たっています。
コンポーネントのスタイリングには MUI 標準のスタイルシステム styled が使えます。また、buttonUnstyledClasses を import することでMUI 同様に focus 時や disabled 時のスタイルを当てることができます。
import * as React from 'react';
import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
import { styled } from '@mui/system';
import Stack from '@mui/material/Stack';
const blue = {
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
};
const CustomButton = styled(ButtonUnstyled)`
font-family: IBM Plex Sans, sans-serif;
font-weight: bold;
font-size: 0.875rem;
background-color: ${blue[500]};
padding: 12px 24px;
border-radius: 12px;
color: white;
transition: all 150ms ease;
cursor: pointer;
border: none;
&:hover {
background-color: ${blue[600]};
}
&.${buttonUnstyledClasses.active} {
background-color: ${blue[700]};
}
&.${buttonUnstyledClasses.focusVisible} {
box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
outline: none;
}
&.${buttonUnstyledClasses.disabled} {
opacity: 0.5;
cursor: not-allowed;
}
`;
export default function UnstyledButtonsSimple() {
return (
<Stack spacing={2} direction="row">
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
</Stack>
);
}Button の他に、 Input や Select、 Switchなどのコンポーネントが用意されています。
MUI Base の使い所
使い所として考えられるのは、MUIがベースに採用されているプロジェクトで、かつMUIが用意しているスタイルの範疇を超えたスタイリングをする必要がある際でしょうか。
標準の MUI コンポーネントだとスタイルをカスタマイズするために既存のスタイルを読み、リセットし上書きする必要がありますが、MUI Base を使うことで MUI のエコシステムの上で楽にコンポーネントをカスタマイズすることができます。
おわりに
今回は MUI Base についてご紹介しました。
使い方次第でかなりカスタマイズが出来そうなので、引き続き使い込んでみようと思っています。
Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています
弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
