ChakraUI Buttonコンポーネントのレスポンシブ対応
ChakraUIのButtonコンポーネントについて
Buttonコンポーネントのsize
propsはオブジェクトの値を入れられず、単一のstring("lg" | "md" | "sm" | "xs"
)しか入れることができません。
レスポンシブ対応をするときには現在のブレークポイントを返すchakraUIのhook useBreakpointValue
を使うことで実現できます。
レスポンシブ対応を含めたコンポーネントを作成します
import React, { forwardRef } from 'react'
import {
Button as ChakraButton,
ButtonProps as ChakraButtonProps,
useBreakpointValue
} from '@chakra-ui/react'
export type ButtonProps = {
children: string | React.ReactNode
// この型指定は恐らくあまりうまくないです
sizes?: string | { base: string; md: string } | { base: string; xl: string }
}
export const Button = forwardRef<
HTMLButtonElement,
ButtonProps & ChakraButtonProps
>(({ children, sizes, ...props }, ref) => {
// useBreakpointValueにはオブジェクトか配列を渡せるので、sizesがstringの場合はstring[]にする
const adjustment = typeof sizes === 'object' ? sizes : [sizes]
// 'md'はデフォルトブレークポイント
const buttonSize = useBreakpointValue(adjustment, 'md')
return (
<ChakraButton size={buttonSize} ref={ref} {...props}>
{children}
</ChakraButton>
)
})
使うとき
import { Button } from '@/components/button'
export const Hoge = () => {
return (
<Button sizes={{ base: 'lg', md: 'xl' }}>
ボタン
</Button>
)}
注意点
createBreakpoints
で独自のブレークポイントを設定しているとき単位をpx
にするとuseBreakpointValue
の挙動がおかしくなることがあるので、createBreakpoints
を使う際は気にする必要があります。
ChakraUIのデフォルトのブレークポイントはem
で指定されているので不都合がなければそれを使うか、独自に指定する場合もemで指定してあげると良さそうです。
Author And Source
この問題について(ChakraUI Buttonコンポーネントのレスポンシブ対応), 我々は、より多くの情報をここで見つけました https://qiita.com/kotomo16/items/54d89ba0430e82249ec2著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .