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.
Related
we have a pretty large Angular v13 app which uses ngrx.
Some parts of our application are quite slow. As part of my analysis, I would like to know which - selectors are being fired.
Is there a way to generically add a console.log to the selectors? Something like:
console.log('selector foobar fired!). I want to avoid to add console.log statements to every single one, though.
This is how we create our selectors:
export const selectUser = createSelector(selectAuthState, (state: AuthState) => state.user);
No, this can't be done with the current API.
However, you can go to your node_modules find the selectors file and add a console log there.
Then, to be sure, you'll also have to clear the angular cache and re-serve the application.
You could also use the DevTools, or the Angular DevTools to find the culprit.
I usually build my Styled Components with a root <Container> tag. However, in my current project, class names generated by Styled Components with identical names are colliding.
For example, <FooWidget> will be styled with the Container styles of <BarWidget>.
This happens unpredictably, but deterministically. I.e. not all <Container>s collide, but when they do, they do so in the same way every time. I can fix this by changing the components' names or root elements, but then this eliminates the scoping benefits of CSS-in-JS.
I've never had this problem before, which makes me suspect in may have to do with server side rendering on Next.js, which I'm using for the first time. If I restart the dev server, everything will display correctly on the initial render, but then break and stay broken on first refresh.
I installed Styled Components according to the Next.js guide. I found this bug on Github that may be related: https://github.com/styled-components/styled-components/issues/3125.
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.
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';