更改React组件的CSS会在所有其他页面上生效 [英] Changing the CSS for a React component has effect on all other pages

问题描述

我有一个带有以下文件的React组件:

I have a React component with the following files:

• src/components/HomePage/index.js
• src/components/HomePage/style.scss

该组件非常简单:

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

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

export default HomePage;

在 style.scss 内，我将样式应用于所有< h1> 标记:

Within style.scss I am applying a style to all <h1> tags:

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

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

And it works as expected. However, I now see that the h1 style within styles.scss is being applied to every h1 on my site, even on pages that do not use this component.

我正在使用Gatsby，但这是一个React应用程序.我的理解是，React的代码拆分功能将解决此问题， style.scss 中的代码将仅包含在使用我的组件的任何页面的捆绑包中.

I am using Gatsby, but it's a React app at heart. My understanding is that React's code-splitting feature would take care of this, that the code from style.scss would only be included in bundles for any page that uses my component.

这是我要问的为什么 .我有两个简单的解决方法:

It's the why that I am asking about. I have two easy fixes:

• 将 style.scss 中的所有内容包装在 .homepage 包装器中
• 使用CSS模块并将文件重命名为 style.module.scss .当我看到人们这样做时，他们总是从'./style.module.scss'导入样式-有没有一种方法可以使CSS模块不分配给这样的对象?

• Wrap everything in style.scss in a .homepage wrapper
• Use CSS modules and rename the file to style.module.scss. When I see people do that they always do `import style from './style.module.scss' - is there a way to have CSS modules without assigning it to an object like that?

推荐答案

如果要本地化CSS规则，则必须切换到

If you want to localize CSS rules, then you would have to switch to modular stylesheets (works the same for sass stylesheets).

在您当前的结构中，该组件导入非模块化样式表，并且不使用唯一标识符对更改进行本地化.此后添加的规则在全局范围内有效，没有唯一的标识符可以对它们进行本地化，因此只有选定的组件才能理解它们.这意味着它们能够轻松地覆盖以前建立的同名规则(此处的导入顺序很重要，因为它将决定捆绑程序如何附加输出样式表).

In your current structure, the component imports non-modular stylesheet and doesn't localize the changes with a unique identifier. Therfore added rules live in a global scope without a unique identifier that would localize them so that only selected components could understand them. That means that they are capable of easily overwriting the same-named rules which were previously established (import order matters here, because it would dictate how the bundler appends the output stylesheet).

因此，与其在 ./style.scss 文件中保留与组件相关的规则，不如将其重命名为 ./index.module.scss ，然后在像这样的组件:

So instead of holding component-related rules within ./style.scss file, rename it to ./index.module.scss and then you would utilize it within the component like so:

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

免责声明:

我已将样式约定从按标签选择元素改为按类选择，因为按标签定位元素被广泛认为是一种不好的做法

I've changed the styling convention from selecting elements by their tag, to selecting them by class, because targetting elements by tag is widely considered a bad practice [ref] , but if you want to maintain it, then you would have to provide a parent scope for such a rule (it already exists since the parent <div/> element has an assigned class. In this case the implementation would look like:

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

这篇关于更改React组件的CSS会在所有其他页面上生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！