【Next.js】Imageコンポーネントにstyleを適用する方法

Imageコンポーネントにstyleを適用する方法です。

~~TailwindCSSと~~styled-jsxではImageコンポーネントにstyleが適用されず、CSS-in-JSはImageコンポーネントには使用できないので備忘録です。

2022年5月29日追記
すいません、私の勘違いでした。
TailwindCSSでもImageコンポーネントにstyleは適用されます。

TailwindCSSを使用する

Imageコンポーネントではデフォルトでborderやmarginなどの一部のstyleが適用されているため、下記のようにTailwindCSSでクラスを指定しても一部のクラスは反映されません。
下記の例では「hover:opacity-70」は適用されますが出力されたimgエレメントに「border: none」がついておりこちらが優先されるため、TailwindCSSのborderは無効になります。

<Image className="border-black border-solid border-2 hover:opacity-70" src="/test.png" width={64} height={64} alt="My avatar" />

TailwindCSSを優先したい場合はtailwind.config.jsにimportantオプションを追加すればTailwindCSSで指定したクラスが優先されるようになります。

module.exports = {
  important: true,
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Sassを使用する

1つ目の方法はSASSを使います。

下記コマンドでインストールできます。

npm install sass

yarn add sass

import Image from 'next/image';

const sample = () => {
  return (
    <div className="divSample">
      <Image className="imgSample" src="/test.jpg" width={500} height={500} objectFit="cover" />
    </div>
    </>
  );
}

export default sample;

.divSample {
  height: 500px;
  margin: 0 auto;
  width: 500px;
}

.imgSample {
  border-radius: 50px/50px;
}

Component-Level CSSを使用する

もう一つはComponent-Level CSSを使います。

import Image from 'next/image';
import styles from './Test.module.css';

const sample = () => {
  return (
    <div className={styles.divSample}>
      <Image className={styles.imgSample} src="/test.jpg" width={500} height={500} objectFit="cover" />
    </div>
  );
}

export default sample;

.divSample {
  height: 500px;
  margin: 0 auto;
  width: 500px;
}

.imgSample {
  border-radius: 50px/50px;
}

~~早くアップデートでTailwindが使えるようになってほしい…~~

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村