More than 3 years have passed since last update.

ReactでMaterialUIのmakeStylesで:before、:afterが表示されない

Posted at 2021-06-30

はじめに

ReactでMaterialUIのmakeStylesを使用した際に、:beforeと:afterが表示されずに時間を使ったので、メモとして残して置きます。

const useStyles = makeStyles(() => ({
  link: {
    '&::before': {
      background: `url(http://~~~~~) no-repeat`,
      content: ''
    }
  }
}))

上記のコードで問題なくbackgroudに指定した画像がlinkのところで表示されるかと思っていましたが、このコードでは何も表示されません。

##　解決した方法

const useStyles = makeStyles(() => ({
  link: {
    '&::before': {
      background: `url(http://~~~~~) no-repeat`,
      content: '""'
    }
  }
}))

上記のコードでは、contentに'""'を指定しました。
JSの中でCSSを書いているので、contentに''だけではJSの空文字として扱われ、CSSに変換した時content: ""の状態にはならず表示されませんでした。

他にもCSSinJSならではハマりどころなどありそうだなと思いました。ハマったら随時メモしていきます。