React CSS - 如何仅将CSS应用于特定页面

Question

我正在使用create-react-app，并尝试找到一种“高效”的方法来将样式表应用于特定的页面。

我的src文件夹结构大致如下：

| pages
| - About
| - - index.js
| - - styles.css
| - Home
| - - index.js
| - - styles.css
| index.js
| index.css

在每个index.js文件中，我使用import './style.css'。

然而，我发现当我从一个页面导航到另一个页面时，目标页面应用了起始页面的样式，就好像它们被缓存了一样，而目标页面的样式则没有被遵循。

我只是想知道是否我误解了如何在React中应用特定页面的样式。我应该制作完全独立的组件，其中包括样式吗？

我正在考虑将它们内联应用，但我意识到在使用JS样式时有局限性。

- tommyd456

Answer 1

创建React应用将会把所有的CSS文件打包成一个文件，使得在每个渲染的组件中都能使用所有样式。需要注意的是，CRA是单页面应用（SPA），因此你不能考虑“页面”，而应该考虑DOM中的“渲染组件”。

你有多种解决方案：

1- 在CSS文件中进行组织：给所有类名加上前缀（例如BEM）或者使用CSS层级 .my-component > .my-class {...}

<div className="my-component">
   <span className="my-class">Hello</span>
</div>

2- 在你的JSX文件中声明所有样式：

const styles= {
  myComponent: {
    fontSize: 200,
  },
};
const myComponent = () => (
  <span style={styles.myComponent}>Hello</span>
);

缺点是你的样式默认情况下不会添加供应商前缀。

3- 弹出或使用 react-scripts（CRA引擎）的分支来使用CSS Modules (https://github.com/css-modules/css-modules)

- gouroujo

---

什么是供应商前缀的含义？ - rbansal

Answer 2

因为React主要用于创建单页面应用程序(SPA)，设计目的是不要反复重新加载整个页面。所以样式表也不会重新加载。

如果您使用Webpack等捆绑器来使用React，则所有样式表都会捆绑在一起。所有React组件都适用。因此，您将获得捆绑后的JS和捆绑后的CSS。

你为什么想要分离样式表呢？

1. 捆绑的CSS文件变得更小。
2. 您可以有重复的样式表名称，但属性设置不同。

第一个观点没有问题。第二个观点并不是一个好的设计，因为您将创建令人困惑的样式表规则，并且它不会使用样式表的通用部分-级联。

我建议坚持捆绑的方法，即使CSS文件比当前呈现页面所需的大小略大。

在我看来，React组件不应依赖于任何样式表。只需实现组件，使其独立工作（除了子组件），然后在具有不同样式表的不同应用程序中使用它们。

不要为组件使用内联样式表，因为这会使你的实际React组件变得臃肿，特别是当这些内联样式不会被使用时，因为整个应用程序中都有捆绑的样式表可用。

- Marc

Answer 3

要将其作为外部 CSS 样式表执行，您需要重命名样式表。您的样式表必须以“.module.css”结尾，例如“styles.module.css”。在这样的文件中的 CSS 只能被导入它们的组件使用。正如 W3Schools 的教程所述。

假设这是您在 styles.module.css 中的 CSS 代码：

.container {
  color: white;
}
.cont-child {
  background-color: red;
}

然后在您的JS文件中，如果JS和CSS文件在同一个目录中，您可以像这样导入CSS文件。请确保指向正确的路径。

import styles from './styles.module.css'

然后在你的HTML部分，你可以像这样使用它：

class Home extends React.Component {
  render() {
    return(
      <main className={ styles.container } >
        <div className={ styles["cont-child"]} >
          Some div text about something...
        </div>
      </main>
    );
  }
}

我目前使用两种方式来访问选择器，因为样式变量的行为类似于一个对象。我在这里放置了它们两个，因为第二个选项能够获取名称为“btn-active”的选择器，这在某些情况下很方便。尽管驼峰命名被认为更加简洁。

- Wylie