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

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

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

Sassを使う

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

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

npm install sass

OR

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