样式化数据反应答案

【问题标题】：Styling Data React样式化数据反应
【发布时间】：2021-04-15 20:29:15
【问题描述】：

我是 React 新手，在这里遇到了一些麻烦——我正在尝试使用 Sass 来为 React 中的组件设置样式。由于某种原因，它不起作用。我收到'styles' is defined but never used 的错误消息，我不确定为什么会发生这种情况，因为我的其他组件工作正常。可能与 jsx 周围的功能有关？我收到一个错误'styles' is defined but never used 非常感谢任何帮助！

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;

covers.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

【问题讨论】：

标签： javascript css reactjs sass jsx

【解决方案1】：

您正在使用 CSS 模块但未正确使用。 CSS Modules 允许您在本地范围内定义您的 css，给定范围内的类的唯一标识符。这避免了名称冲突，鉴于 CSS 中的全局范围性质，可能会出现此问题。

但在您导入样式后，您的文件可以正常工作：

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

您需要使用在您的className 声明中导入的styles 对象，而不是像您那样传递字符串名称。由于您没有在任何地方应用styles，因此您会收到此错误警告。您应该使用相应的所需类传递给className 样式。

因此，应用styles 的正确方法是：

<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>

当您修复错误时，您的样式将按预期工作，并且在浏览器中您将生成独特的类，确保不会遇到任何类名冲突。

【讨论】：

【解决方案2】：

只需替换

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

与

import './covers.module.sass';

【讨论】：

【解决方案3】：

你不能像这样使用 className <img src={cover} className="cover-image" />

正确的是<img src={cover} className={styles.cover-image} />

或

你可以像 import './covers.module.sass'; 这样导入 sass 文件并像 <img src={cover} className="cover-image" /> 这样使用 className

参考：https://www.w3schools.com/react/react_sass.asp

【讨论】：