Chapter 09無料公開

疑似要素スタイル(&:hover)等は_hoverのように指定する

terrierscript
terrierscript
2021.05.07に更新
このチャプターの目次

styleをつける場合はcolor="red"などで表現しますが、疑似要素はどうするのか?という疑問が出てきます。

疑似要素の場合は_hoverのような形で指定します。objectを与えることになるので通常のCSS in JSのような記法になります。

<Text _hover={{ fontWeight: "bold" }}>Hover Me</Text>

ChakraUIの持つthemeの値などは利用可能です

<Text color="blue.500" fontSize="sm" _hover={{ color: "red.500", fontSize: "xl" }}>Hover Me</Text>

その他よく使われる::before, ::afterのようなものも使えます。例えば鉤括弧装飾をするならこんな形になるでしょう

const Quoted : FC<{}>= ({children}) => <Box _before={{content:`"「"`}} _after={{content:`"」"`}}>
  {children}
</Box>

// 利用例
<Quoted>
  ここにセリフ
</Quoted>

また、Inputなどであれば::placeholderのような疑似要素も利用できます。

<Input placeholder="プレースホルダー" _placeholder={{color: "purple.500"}}/>

Demo