javascript - 在 React 中为不同的路由使用不同的 CSS

Question

我需要能够在 React 的不同路由中使用 CSS。我宁愿不使用 SASS，但如果它是唯一的解决方案，我会使用它。

我的主页(index.js)需要使用index.css，我的其他页面(page2.js)需要使用page2.css(示例名称)

文件结构:

-src
  -components
  -pages
     -css
        -index.css
        -page2.css
     -index.js
     -page2.js

文件:

// src/pages/index.js
import React from 'react'
import './css/index.css'

const Homepage = () => {
  return (
    <!-- unrelated HTML -->
  )
}

export default Homepage

// src/pages/page2.js
import React from 'react'
import './css/page2.css'

const Page2 = () => {
  return (
    <!-- unrelated HTML -->
  )
}

export default Page2

看起来确实应该可以正常工作，但它会同时加载两个 CSS 文件，并且它们会重叠并出现故障。

我真的很想避免使用如上所述的 SASS 之类的东西。有没有什么方法可以通过路由来做到这一点，而无需做一些像在页面更改时更改 link 标记之类的黑客行为？

Answer 1

我强烈建议你使用css模块，css模块只是普通的css文件，但应用于css标准化结构来管理页面之间的多个css文件。

为此你应该:

1. 将您的 CSS 文件重命名为“homePage.module.css/page2.module.css”
2. 将每个 css 文件移动到其页面目录

看起来像这样

-src
  -components
  -pages
        -page2.js
        -page2.module.css
     -index.js
     -homePage.module.css

最后在其对应的页面中导入每个css文件 让我知道它是否对您有用。