I have two theme files: light.css and dark.css. I want to switch between the two themes with the useState React Hook (or another method in a react functional components).
For example, I have this in my Navbar functional component:
import "./light.css"
So I want a mechanism to import (or rather switch) the two files using the hooks based on a user action by pressing a toggle or a button on the Navbar which would call a 'setTheme' and have that in a useEffect block.
Does that make sense? If yes, how do I do that? All the tutorials I can find are based on hardcoded css while in my situation I must use the two files mentioned above. thanks
Solved it!
I basically used what I was suggesting in my question but with an extra twist:
I used those hooks: useState, useEffect and useContext
the useState: to switch the values between dark and light.
the useContext: to write in the localstorage the theme: item (for persistence)
the useEffect: to check the value from the local storage each time the theme value is changed + refresh the browser.
Not sure if it is the neatest solution, but it works and saves the user preference which is a plus for me.
Related
I am developing my own library of react components. I am using rollup to create the build. I also want to ship css along with it which i bundled into a single styles.css file. My concern is how a user would use it. They can simply import the components using import { Component1, Component2 } from 'my-library' but they are not styled by default. This can be solved by importing the css file: import 'my-library/build/styles.css' but i feel like this import is redundant, i want the css file to be included by default in my library index.js file. I am not sure how can i achieve this.
I am using rollup and rollup-plugin-postcss.
So my question is how do i do this? Should i use some rollup plugin? Is my idea right in the first place? Maybe i should leave it to the user to decide how they want it bundled because my approach forces them to use some loader for css files?
If you want to ship external styles (instead of e.g. a CSS-in-JS system such as Emotion), that "redundant import" way is the standard, exactly because you can't know how the user of your library wants the styles applied to their page, or which loader (or bundler!) they'd want to use.
It's also possible there's no document to inject styles into at all, in case your users are server-side-rendering your component to be hydrated on the client side.
Wondering if anyone can lay out how one avoids a situation wherein a React application that uses material-ui classNames from makeStyles, and which includes a package that ALSO does that, hence two name generators, results in multiple, conflicting .jss1, .jss2, etc. in the production rendered page that includes both the app's components as well as the included package's.
I have control of both, so I can modify either to have a prefix, but I'm not at all clear on where one injects that into a v4 material-ui project.
Now, I know that createGenerateClassName allows one to pass in a prefix, but it's not clear to me how one injects that into the ThemeProvider. I wrapped the whole thing in a StylesProvider and passed the resulting generateClassName to that, but that seemed to be ignored.
Well, allow me to answer my own question for future generations. Turns out that you can indeed wrap the ThemeProvider with a StylesProvider with a generateClassName argument:
const generateClassName = createGenerateClassName({
productionPrefix: 'coreJss'
});
...
<StylesProvider generateClassName={generateClassName}>
<ThemeProvider theme={MyTheme}>
Stuff
</ThemeProvider>
</StylesProvider>
Now, your production classNames will be coreJss1, coreJss2... for that package and jss1, jss2...
Now, you might ask 'why didn't yours work in the first place?' and I would tell you to pay close attention to what you actually committed vs. what you typed and didn't save.
Concerning page loading speed, It seems strange to me that React is importing CSS files that are imported in components that are not even being used on the homepage. My react app seems to be importing every css file in my entire project, i'm sure this is affecting my page speed. How can i prevent react from importing css files (which are being imported by components) that are not even being imported/exist on a certain page?
For example my homepage may have Comp1.js, comp2.js and comp3.js and each of these files import their own css files. But i see css files from other pages being loaded in the html head tag...(see screenshot below)
const comp1 = await import('path');
I was having a similar issue, which led me to discover this question. Here's what worked for me:
Instead of importing the CSS files at the head of the component's source, you can import the file using import(<path>); in the render() function in case of class-based components, or before the return() statement in case of stateless functional components.
That way React won't be able to load the files at app's startup because their imports have been abstracted away by not being there in the top level structure of any component.
I'm just beginning to learn React so if anyone has a clearer explanation of how this works, I'll be more than happy to know.
I am trying to use two snippets as components from bootsnipp, and each snippet has its own css. i tried to put them both in the style.css, but it ended up damaging one component for the other to look fine.
I'm thinking about how to use both these styles.css, since in the index.js i can only import style.css.
can i use router to use multiple pages, and import style.css in the second page? but wouldn't that mean i'll have to use the second page as app.js, which is called only once in react? this is kind of confusing me.
EDIT: can I put the css of one component in another css file, and then import it INSIDE that component instead of index.js?
it doesn't bother me by the way whether i put that component inside index.js or not; in fact, I'm not going to use it there.
I would say you need to deal with the global namespace issue. You could create two components with its own css file.
Then add a unique className to stop collisions.
The benefit here is that you could also enable code spitting, so you would only load html/css/js when you need it (see React.lazy).
—-
By trying to load two styles in different times or manners you will still have the same issue of conflicting styles.
I'm working on a React app. I have a few different stylesheets to restyle the same elements. Let's say for sake of this question I have two that have identical elements but different styles. Right now, in the app, I just import it with:
import './Stylesheet1.css';
What I'd like to do is, based on a setting for that customer in a database, it would switch to using ./Stylesheet2.css instead.
I know there are extra modules to include out there that may help and I could do things with dynamically building stylesheets and I may need to go to those options, but for now, I'd like to see if there is simply some way to dynamically swap out which CSS file I'm pointed to.
Well another way you can do this is as follow:
import style1 from './Stylesheet1.css';
import style2 from './Stylesheet1.css';