#Load CSS for specific page in Reactjs that doenst affect other

1 messages · Page 1 of 1 (latest)

brave belfry
#

Hi, so i have found a solution that is to use css-module, but it will require to type the specific classname which will be annoying later

I also found another solution that is to use React-Helmet,

i have tried this code on blog.js. The title tag works, but the css doesnt load

{<Helmet>
                <meta charSet="utf-8" />
                <title>My Blog</title>
                <link rel="stylesheet" href="auth.css" />
            </Helmet>}

anyone knows why

craggy horizon
#

This is called scoped css and I can't believe react doesn't support this natively like eg Vue does

brave belfry
#

hey @craggy horizon , i found the answer for my own question

i havent looked at your approach yet but as i read the readme, seems like it'll need some set up

regarding the solution i mentioned in this thread - React-helmet, i now find the reason why the css doesnt load

here's how to load Css using React-helmet


import {Helmet} from 'react-helmet';

const Layout = () => {

    const css = require('./layout.css').toString();
    return (
        <>
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Blog</title>
                <style>
                        {css}
                </style>
            </Helmet>

            <div>
              <p>Hello</p>
            </div>
        </>
        
    )
}

export default Layout

so much simpler, and this is actually kinda the same as using css in vanilla html

#

idk if this is a best practice but at the first glance it's the cleanest way