Use Different CSS for Different Routes In React

Question

I need to be able to use CSS in different routes in React. I would much prefer to not use SASS, but if it is the only solution I will use it.

My Homepage (index.js) needs to use index.css and my Other Page (page2.js) needs to use page2.css (example names)

File Structure:

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

Files:

// 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

It really seems like this should work fine, but it loads both CSS files at once and they overlap and glitch out.

I would really like to avoid using things like SASS as stated above. Is there any way to do this with routes without doing something hacky like changing a link tag whenever the page changes?

@super I don't think it does anymore, I have tried some re-ordering and it still keeps both stylesheets in one route. — MrDiamond
– MrDiamond, Commented Nov 19, 2022 at 0:49

biccs · Accepted Answer · 2022-11-19 01:12:45Z

4

I would strongly suggest you use css modules, css modules are just normal css files but applied to a css standarized structure to manage multiple css files among pages.

For this you should:

Rename your css files to "homePage.module.css / page2.module.css"
Move each css file to its page directory

It would look like this

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

Finally import each css file in its corresponding page Let me know if it worked for you.

answered Nov 19, 2022 at 1:12

biccs

14711 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MrDiamond Over a year ago

Thanks so much! It works well its just is tedious to convert all my classes to the module css classes.

Syed M. Sannan Over a year ago

This is a nextjs-only solution afaik. Do we have anything for react on its own?

Syed M. Sannan Over a year ago

Nevermind, works with React too (with Vite at least).

Collectives™ on Stack Overflow

Use Different CSS for Different Routes In React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related