时间戳

首页 > 解决方案 > 更改 React 组件的 CSS 会影响所有其他页面

javascript - 更改 React 组件的 CSS 会影响所有其他页面

问题描述

我有一个包含以下文件的 React 组件：

组件非常简单：

import React from 'react';
import './style.scss';

const HomePage = () => {
    return (
        <div className="homepage">
            <h1>Landing page</h1>
        </div>
    );
};

export default HomePage;

在style.scss我将样式应用于所有<h1>标签：

h1 {
    color: #f3f3f3;
    font-family: "Cambria";
    font-weight: normal;
    font-size: 2rem;
}

它按预期工作。但是，我现在看到其中的 h1 样式styles.scss正在应用于我网站上的每个 h1，即使在不使用此组件的页面上也是如此。

我正在使用 Gatsby，但它本质上是一个 React 应用程序。我的理解是 React 的代码拆分功能会解决这个问题，来自的代码style.scss只会包含在使用我的组件的任何页面的捆绑包中。

这就是我要问的原因。我有两个简单的修复：

更新：在 React 花了很多时间之后回到这个问题，我认为 React 样式市场存在差距。在我看来，CSS 模块在语法上很差，必须手动将所有内容包装在.home标签中以对其进行本地化，这是我不想做的手动工作。真的应该有人创建一个自动执行此操作的 React 插件，这样每当我调用一个文件Home.js并导入Home.css时，所有 CSS 都会自动限制到，Home.js而无需我做任何特别的事情。

标签： javascriptcssreactjscss-modules

解决方案

如果您想本地化 CSS 规则，那么您将不得不切换到模块化样式表（对于 sass 样式表的工作方式相同）。

在您当前的结构中，组件会导入非模块化样式表，并且不会使用唯一标识符本地化更改。因此，添加的规则存在于全局范围内，没有唯一的标识符来本地化它们，以便只有选定的组件才能理解它们。这意味着它们能够轻松覆盖之前建立的同名规则（导入顺序在这里很重要，因为它将决定捆绑器如何附加输出样式表）。

因此，不要在文件中保存与组件相关的规则./style.scss，而是将其重命名为./index.module.scss，然后您将在组件中使用它，如下所示：

import React from 'react';
import styles from './index.module.scss';

const HomePage = () => {
    return (
        <div className={style.homepage}>
            <h1 className={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 className={style.homepage}>
            <h1>Landing page</h1>
        </div>
    );
};

export default HomePage;

和风格：

.homepage {
    h1 {
        color: #f3f3f3;
        font-family: "Cambria";
        font-weight: normal;
        font-size: 2rem;
    }
}

推荐阅读