Saya baru mengenal React dan mengalami beberapa masalah di sini- Saya mencoba menggunakan Sass untuk mendesain komponen di React. Untuk beberapa alasan itu tidak berfungsi. Saya mendapatkan kesalahan bahwa 'styles' is defined but never used Saya tidak yakin mengapa ini terjadi karena komponen saya yang lain berfungsi dengan baik. Mungkin ada hubungannya dengan fungsi di sekitar jsx? Saya mendapatkan kesalahan 'styles' is defined but never used Bantuan apa pun sangat dihargai!

Covers.js

import React from 'react';
import { videos } from '../../data/videos.json';
import styles from './covers.module.sass';

export const Covers = () => (
  <div className="cover-container">
    {videos.map((data, key) => {
        return (
            <Cover 
              key={key}
              cover={data.cover}
              title={data.title}
              subtitle={data.subtitle}
              description={data.description}
            />
        );
      })}
  </div>
);

const Cover = ({title, subtitle, description, cover}) => {
  return (
    <div>
      <img src={cover} className="cover-image" />
      <h1 className="cover-title">{title}</h1>
      <h2 className="cover-subtitle">{subtitle}</h2>
      <p className="cover-description">{description}</p>
    </div>
  );
};

export default Covers;

Cover.module.sass

.cover-container
  text-align: center
  color: white

.cover-image
  width: 200px
  height: 200px
  object-fit: cover

.cover-title 
  font-size: 7em

.cover-subtitle
  font-size: 4em

.cover-description
  font-size: 2em
1
Kcandle 10 Januari 2021, 22:40

3 jawaban

Jawaban Terbaik

Anda menggunakan Modul CSS tetapi tidak menggunakannya dengan benar. Modul CSS memungkinkan Anda untuk melingkupi css Anda secara lokal, dengan memberikan pengenal unik ke kelas untuk cakupan yang diberikan. Ini menghindari tabrakan nama, masalah yang dapat terjadi mengingat sifat lingkup global dalam CSS.

Tetapi untuk itu berfungsi dengan baik di file Anda setelah mengimpor gaya seperti yang Anda lakukan:

import styles from './covers.module.sass';

Anda perlu menggunakan objek styles yang diimpor pada deklarasi className Anda, daripada meneruskan nama string seperti yang Anda lakukan. Karena Anda tidak menerapkan styles di mana pun Anda mendapatkan peringatan kesalahan ini. Anda harus meneruskan ke gaya className dengan kelas yang diinginkan yang sesuai.

Oleh karena itu, cara yang benar untuk menerapkan styles adalah:

<div>
  <img src={cover} className={styles.cover-image} />
  <h1 className={styles.cover-title}>{title}</h1>
  <h2 className={styles.cover-subtitle}>{subtitle}</h2>
  <p className={styles.cover-description}>{description}</p>
</div>

Saat Anda melakukannya, kesalahan Anda diperbaiki, gaya Anda berfungsi seperti yang diharapkan, dan di browser Anda akan memiliki kelas unik yang dihasilkan yang memastikan bahwa tidak akan menghadapi tabrakan nama kelas apa pun.

1
buzatto 10 Januari 2021, 23:00

Anda tidak dapat menggunakan className seperti ini <img src={cover} className="cover-image" />

Benar akan menjadi <img src={cover} className={styles.cover-image} />

Atau

Anda dapat mengimpor file sass seperti ini import './covers.module.sass'; dan menggunakan className seperti ini <img src={cover} className="cover-image" />

Ref: https://www.w3schools.com/react/react_sass.asp

1
Sodhi saab 10 Januari 2021, 19:43

Ganti saja

import styles from './covers.module.sass';

Dengan

import './covers.module.sass';

1
Mohammad Faisal 10 Januari 2021, 19:43