MUIのstyledで条件分岐する方法

コンポーネントの状態によってスタイルを変えたいことがあると思う。
今回、MUIのstyled()を採用したプロジェクトで、スタイルの条件分岐が必要になったので、方法をメモしておく。

const Panel = () => {
    const [isOpen, setIsOpen] = useState(false)

    const toggleShow = () => {
        setPanelShow(!isOpen)
    }
    
    return (
        <Box>
            <Button onClick={toggleShow}>クリック</Button>
            <Panel open={isOpen}> {/* プロパティとして表示・非表示の状態を渡す */}
                ボックス
            </Panel>
        </Box>
    )
}

export default Panel

const Panel = styled(Box)<{ open: boolean }>(({ open }) => ({
  width: 250,
  height: 250,
  backgroundColor: '#f0f0f0',
  transition: 'opacity 0.5s ease',
  transform: open ? 'translateX(0)' : 'translateX(100%)', // openに応じてtransformを切り替え
}));

スタイルを条件分岐によって切り替えたい場合は、propsを使って、Stateに定義した状態を渡すことで実現できる。

上記の例では、ボタンをクリックすることでtransformの値が切り替わり、<Panel></Panel>がスライドして表示される。ハンバーガーメニューなどに活用できそう。

コンポーネントの表示・非表示は分かりやすいが、スタイルの条件分岐、特にstyledを使用するときの方法が分からなかったので覚えておく。