はじめに
自分が詰まったので。特にtailwind。
style attributeを使う
一番手っ取り早いのはこれです。
<div style={{ backgroundImage: imageUrl }}>
....
</div>
擬似クラス使えない問題
style attibute内では:hoverなどの擬似クラスが使えないので、この手法は背景画像が常に表示されるデザインにのみ使えます。「hover時のみ表示したい」などといった場合は以下から紹介するアプローチが必要になります。
css-modulesを使う
Component.jsx
import style from './Component.module.css'
const Component = ({ imageUrl }) => {
const cssProperties = {
'--image-url': `url(${imageUrl})`
}
return (
<div style={{ cssProperties }} className={style.backgroundImage}>
....
</div>
)
}
Component.module.css
.backgroundImage:hover {
background-image: var(--image-url);
}
これでhover時のみ背景画像を表示させることができます。
TypeScriptの場合
custom propertyを含むオブジェクトに正しい型を付けてあげないとstyle attributeで弾かれます。
import { CSSProperties } from 'react'
const cssProperties = {
'--image-url': `url(${imageUrl})`
} as CSSProperties
ありがちなミス
Component.jsx
// ❌
const cssProperties = {
'--image-url': imageUrl
}
// ⭕
const cssProperties = {
'--image-url': `url(${imageUrl})`
}
Component.module.css
/* ❌ */
.backgroundImage:hover {
background-image: url(var(--image-url));
}
/* ⭕ */
.backgroundImage:hover {
background-image: var(--image-url);
}
tailwindcssを使う
const Component = ({ imageUrl }) => {
const cssProperties = {
'--image-url': `url(${imageUrl})`
}
return (
<div style={{ cssProperties }} className='hover:bg-[image:var(--image-url)]'>
....
</div>
)
}
ありがちなミス
<div className={`hover:bg-[url(${imageUrl})]`}>
....
</div>
tailwindはコンパイル時にcssを生成しているので、クラス名の一部に動的な値が含まれているとそのクラス名は生成されません。
<div style={{ cssProperties }} className='hover:bg-[var(--image-url)]'>
....
</div>
bg-[]の中のimage:が抜けているので、tailwind側からするとvar(--image-url)が背景色なのか背景画像なのか分からない状況になっています。
styled-componentsを使う
import styled from "styled-components";
const Component = ({ imageUrl }) => {
return (
<DivWithImage url={imageUrl}>
....
</DivWithImage>
)
}
const DivWithImage = styled.div`
&:hover{
background-image: url(${prop => prop.url});
}
`
TypeScriptの場合
const DivWithImage = styled.div<{ url: string }>`
&:hover{
background-image: url(${prop => prop.url});
}
`
propの型を定義しましょう。
ありがちなミス
import styled from "styled-components";
const Component = ({ imageUrl }) => {
return (
<DivWithImage>
....
</DivWithImage>
)
}
const DivWithImage = styled.div`
&:hover{
background-image: url(${imageUrl}); // ❌
}
`
DivWithImageの定義が親コンポーネントの外で行われているので、親のpropであるimageUrlには直接アクセスできません。
これを可能にするには、DivWithImageの定義を親コンポーネント内で行えばよいのですが、レンダーごとに定義し直されてしまうのでパフォーマンスが落ちます。最初の例のように外で定義して別でpropを渡しましょう。
おわりに
tailwind君、基本的には使いやすいけど動的な値が絡んでくると途端にポンコツになりがち。
なにか間違いがあればコメントで教えてくれると助かります。
↧