样式化数据反应

Question

我是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;

盖子.模块.通道

.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

Answer 1

您正在使用CSS模块，但没有正确使用。CSS模块允许您在本地确定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>

当您修复错误时，您的样式将按预期工作，并且在浏览器中，您将生成唯一的类，从而确保不会面临任何类名冲突。

Answer 2

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

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

或

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

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

Answer 3

只需更换

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

带有

import './covers.module.sass';