MaterialUIカスタムホバー設定
React.jsでMaterialUIのカスタムホバースタイルを解説
MaterialUIはReact.jsのコンポーネントライブラリで、さまざまなUI要素を簡単に実装できます。その中でも、ホバー効果はユーザーインターフェイスをよりインタラクティブにする重要な要素です。この記事では、MaterialUIのカスタムホバースタイルについて解説します。
基本的なホバースタイル
MaterialUIのコンポーネントは、デフォルトでホバー状態のスタイルが設定されています。しかし、独自のスタイルを適用したい場合は、hoverプロパティを使用します。
import { Button } from '@mui/material';
<Button variant="contained" color="primary" hover={{ backgroundColor: 'pink' }}>
Hover Me
</Button>
この例では、ボタンがホバーされたときに背景色がピンクになります。
CSSの@mediaクエリを使用してデバイスごとに異なるホバースタイル
異なるデバイスサイズに合わせてホバースタイルを調整したい場合は、CSSの@mediaクエリを使用します。
import { Button } from '@mui/material';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
button: {
'&:hover': {
backgroundColor: 'pink',
'@media (max-width: 600px)': {
backgroundColor: 'lightblue',
},
},
},
}));
<Button variant="contained" color="primary" className={useStyles().button}>
Hover Me
</Button>
この例では、画面幅が600px以下のデバイスでは、ホバー時の背景色がライトブルーになります。
themeオブジェクトを使用してテーマに応じたホバースタイル
MaterialUIのテーマシステムを利用して、テーマに応じたホバースタイルを設定することもできます。
import { Button } from '@mui/material';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
button: {
'&:hover': {
backgroundColor: theme.palette.primary.dark,
},
},
}));
<Button variant="contained" color="primary" className={useStyles().button}>
Hover Me
</Button>
この例では、ホバー時の背景色がテーマのプライマリカラーのダークシェードになります。
カスタムホバースタイルを複数のコンポーネントに適用
複数のコンポーネントに同じホバースタイルを適用したい場合は、スタイルを共通のクラスとして定義し、各コンポーネントに適用します。
import { Button, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
hoverStyle: {
'&:hover': {
backgroundColor: 'pink',
},
},
}));
<Button variant="contained" color="primary" className={useStyles().hoverStyle}>
Hover Me
</Button>
<Typography variant="h6" className={useStyles().hoverStyle}>
Hover Me
</Typography>
この例では、hoverStyleクラスをボタンとテキストコンポーネントの両方に適用し、同じホバー効果を適用しています。
MaterialUIのカスタムホバースタイルのコード例解説
import { Button } from '@mui/material';
<Button variant="contained" color="primary" hover={{ backgroundColor: 'pink' }}>
Hover Me
</Button>
- backgroundColor
ホバー時の背景色を設定します。 - hoverプロパティ
ホバー状態のスタイルを指定します。
import { Button } from '@mui/material';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
button: {
'&:hover': {
backgroundColor: 'pink',
'@media (max-width: 600px)': {
backgroundColor: 'lightblue',
},
},
},
}));
<Button variant="contained" color="primary" className={useStyles().button}>
Hover Me
</Button>
- max-width: 600px
画面幅が600px以下の場合に適用されます。 - @mediaクエリ
画面幅に応じて異なるスタイルを適用します。
import { Button } from '@mui/material';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
button: {
'&:hover': {
backgroundColor: theme.palette.primary.dark,
},
},
}));
<Button variant="contained" color="primary" className={useStyles().button}>
Hover Me
</Button>
- theme.palette.primary.dark
テーマのプライマリカラーのダークシェードを使用します。 - themeオブジェクト
MaterialUIのテーマ情報を取得します。
import { Button, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
hoverStyle: {
'&:hover': {
backgroundColor: 'pink',
},
},
}));
<Button variant="contained" color="primary" className={useStyles().hoverStyle}>
Hover Me
</Button>
<Typography variant="h6" className={useStyles().hoverStyle}>
Hover Me
</Typography>
- 共通のクラス
hoverStyleクラスを複数のコンポーネントに適用することで、同じホバースタイルを共有します。
CSSの:hoverセレクタを使用
MaterialUIのコンポーネントに直接CSSの:hoverセレクタを適用することもできます。
import { Button } from '@mui/material';
<Button variant="contained" color="primary" className="my-button">
Hover Me
</Button>
<style>
.my-button:hover {
background-color: pink;
}
</style>
この方法では、CSSファイルにスタイルを定義し、クラス名を使用してコンポーネントに適用します。
styled-componentsライブラリを使用
styled-componentsは、CSSをJavaScriptのテンプレート文字列として記述できるライブラリです。これを使用して、MaterialUIのコンポーネントにカスタムスタイルを適用できます。
import styled from 'styled-components';
import { Button } from '@mui/material';
const StyledButton = styled(Button)`
&:hover {
background-color: pink;
}
`;
<StyledButton variant="contained" color="primary">
Hover Me
</StyledButton>
この方法では、コンポーネントをラップしてスタイルを適用します。
@emotionライブラリを使用
@emotionは、CSSをJavaScriptのテンプレート文字列として記述できる別のライブラリです。MaterialUIと組み合わせて使用することもできます。
import { Button } from '@mui/material';
import { css } from '@emotion/react';
const hoverStyle = css`
&:hover {
background-color: pink;
}
`;
<Button variant="contained" color="primary" css={hoverStyle}>
Hover Me
</Button>
この方法では、CSSをJavaScriptのテンプレート文字列として定義し、コンポーネントに適用します。
reactjs styles
