我有一个包含以下文件的 React 组件：
src / components / HomePage / index.js
src / 组件 / 主页 / style.scss
组件非常简单：
import React from 'react';
import './style.scss';
const HomePage = () => {
return (
<div clName="homepage">
<h1>Landing page</h1>
</div>
);
};
export default HomePage;
在style.scss中，我将样式应用于所有<h1>标签：
h1 {
color: #f3f3f3;
font-family: "Cambria";
font-weight: normal;
font-size: 2rem;
}
但是，我现在看到styles.scss中的 h1 样式正在应用于我网站上的每个 h1，即使在不使用此组件的页面上也是如此。
我正在使用 Gatsby，但它是一个 React 应用程序。我的理解是 React 的代码拆分功能会处理这个问题，来自style.scss的代码只会包含在使用我的组件的任何页面的包中。
这是我要问的为什么。我有两个简单的修复方法：
在.homepage包装器中包装style.scss中的所有内容
使用 CSS 模块并将文件重命名为style.module.scss。当我看到人们这样做时,他们总是做 'import style from'./ style.module.scss '-有没有办法让 CSS 模块不分配给这样的对象?
更新：在花了很多时间使用 React 之后，回到这个问题，我认为 React 样式的市场存在差距。在我看来，CSS 模块在语法上很差，必须手动将所有内容包装在.home标签中以自动进行本地化，这是我不想做的手动工作。有人应该真正创建一个 React 插件来自动执行此操作，以便每当我有一个
6
如果要本地化 CSS 规则，则必须切换到modular stylesheets（对于 s 样式表也是如此）。
在您当前的结构中，组件导入非模块化样式表，并且不使用唯一标识符本地化更改。因此，添加的规则存在于全局范围内，没有唯一的标识符来本地化它们，以便只有选定的组件才能理解它们。这意味着它们能够轻松覆盖以前建立的同名规则（导入顺序在这里很重要，因为它将决定器如何附加输出样式表）。
因此，与其在./style.scss文件中保存与组件相关的规则，不如将其重命名为./index.module.scss，然后在组件中使用它，如下所示：
import React from 'react';
import styles from './index.module.scss';
const HomePage = () => {
return (
<div clName={style.homepage}>
<h1 clName={style.heading}>Landing page</h1>
</div>
);
};
export default HomePage;
和你的样式表看起来像：
.heading {
color: #f3f3f3;
font-family: "Cambria";
font-weight: normal;
font-size: 2rem;
}
免责声明：
我已经改变了样式约定，从按标签选择元素到按类选择元素，因为按标签定位元素被广泛认为是一种不好的做法[ref]，但是如果你想维护它，那么你必须为这样的规则提供一个父范围（它已经存在，因为父<div/>元素具有分配的类。
import React from 'react';
import styles from './index.module.scss';
const HomePage = () => {
return (
<div clName={style.homepage}>
<h1>Landing page</h1>
</div>
);
};
export default HomePage;
和样式：
.homepage {
h1 {
color: #f3f3f3;
font-family: "Cambria";
font-weight: normal;
font-size: 2rem;
}
}
3
您可以使用下面提到的最简单的方法。
import React from 'react';
import './style.scss';
const HomePage = () => {
return (
<div clName = "home">
<div clName="homepage">
<h1>Landing page</h1>
</div>
</div>
);
};
export default HomePage;
您可以将整个 html 包装在特定组件名称的一个 div 中
CSS：
.home h1 {
color: #f3f3f3;
font-family: "Cambria";
font-weight: normal;
font-size: 2rem;
}
这是最简单的方法。然而，这是我个人的解决方案，因为当我在反应初学者时，我也面临同样的问题。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（31条）