Kind of a beginner's question - I try to get a deeper understanding of the above components, and about there differences. These is how far I got, maybe it can illustrate my confusion a bit:
ThemeProvider: From my tests, it provides a Palette with my style settings for MUI components. N/c where it gets accessed, but I figure MUI components to that implicitely at some point. At least the according Theme is made available in all kind of hooks as well as in createTheme in #mui/material/styles, so I figure this is the one component I understand the most.
StyledEngineProvider: According the documentation, it is there for "generating CSS styles for MUI components". What exactly is the difference to ThemeProvider? I've noticed that it must be a child of the ThemeProvider component and not the otherway around, or my Palette won't apply. Most guides call it with the property injectFirst - I figure this way the css data will be put at the start of html's head. So is it there to inject css data into the html? I seem to need it when using tss-react though.
CacheProvider from #emotion/react: Not sure what's actually cached and I didn't find any example where it's accessed/used in custom code. The documentation here is rather sparse as well, but it tells me to replace <StyledEngineProvider injectFirst> with it. So it seems to expect injectFirst to be set whatsoever, and it seems to work more or less as drop-in replacement of StyledEngineProvider. I noticed it has a property prepend which I suspect to have a similar effect as injectFirst. Then, there is a key property - a "prefix" for the css classes, as the documenation says. I figure it's there to allow multiple caches in multiple namespaces, but I wouldn't even know how to specify the key/namespace to be used.
If anybody could shed some light on (some) of these questions, I'm grateful!
Related
I'm having trouble with a graph I'm building with React-ChartJS-2:
I've got two line charts in one canvas, one of them is interactive (the user can activate points and can compare different values on that graph) the other one is just a static graph which should be a orientation for the user. I'm trying to prevent the rerendering of the static graph if the user activates datapoints on the interactive graph (which changes the props and thus the useMemo Hook doesnt work). Is there a way to separate the two datasets in two single components so the props don't change for the static graph without some hacky CSS?
Thank you in advance!
I kinda found a solution by deactivating the animation so the user doesn't see the rerendering, but it's not the nicest I guess. Right now I'm trying to render the two line Charts and try to stack one on top of the other with CSS
Hi There #Lucas2101 it would be easier to answer your question with a code example. What is the reason you need the useMemo hook. And to answer one of your questions the useMemo hook runs when the items in the dependency array update so it might be that you haven't added the correct thing to that array. I can't say for sure as i have no code.
in our new project we've transited to mui 5. I found that we are using sx prop much for custom layouts and components. there are many examples of such usage in documentation of mui itself. it looks a bit hard coded for me:
it's very similar to usage of style property for inline styling. how reuse of styles should be organized here?
it's not comfortable for debugging too since sx props has no name and it's hard to identify what component styles come from. is there any way to have sx prop named?
Will appreciate if somebody will share best practices how to organize style with mui 5 in proper way.
cheers.
New to Fluent UI React.
I have been tinkering around with the framework and read through all of its documentation that I can find. My understanding is that CSS-in-JS approach is encouraged when it comes to component styling. I see there are two ways to do so–via the styles prop and via the use of the mergeStyleSets utilities function + the className prop. Here is a codepen to illustrate what I mean here.
My question is, do they serve different use cases or are they pretty much the same? How do I decide which one to use? Thanks.
I've tried both and am leaning more toward mergeStyleSets because it gives me one way to predictably target everything and I don't have to learn the "magic class names" buried deep within each component and what it does or does not affect. Having said that, for certain key components, like DataGrid, there's a lot of styling involved and the classes exposed are not too difficult to learn and are helpful for getting the best out of those components.
This is particularly the case when you have to do selectors for things like "hover" or "active" or "before/after". Trying to get that working via magic class names exposed by "styles" was much more confusing for me than using the "mergeStyles" approach on the raw HTML directly.
So for me, I've been cherry picking from the framework, using it for color themes, elevation, and highly complicated components like DataGrid, but not for things like Stack or Stack Item.
Beginning to build a new UI library using the atomic design methodology we quickly ran into a problem when trying to categorise the smallest UI building blocks as atoms. An example here might be a React component that might be say, <SVGComponent />. Initially classified as an atom - it quickly became apparent that it probably wasn't. In terms of atomic design it wouldn't fit the vocabulary of being an atom - it is an implementation detail. So an <Icon /> component might fit the design classification of atom and the implementation of that component might be composed of an <SVGComponent />. There are other examples of such components eg <Font/>.
Is there a common parlance for describing and classifying such components alongside an atomic ui library and where a dependency exists? Any thoughts generally on this?
Thanks
I'm not an expert in concepts of AD, but referring to the definition:
Atoms are the smallest possible components, such as buttons, titles,
inputs or event color pallets, animations, and fonts. They can be
applied on any context, globally or within other components and
templates, besides having many states, such as this example of button:
disabled, hover, different sizes, etc.
So, if I understood the purpose of <SVGComponent /> right, I don't quite agree that it doesn't fit the vocabulary of being an atom. Comparing it with the <Button /> component (which is an atom), it can freely receive props like 'width', 'height', 'viewBox', etc.
As for the <Icon /> component, it's not necessary to compose <SVGComponent /> inside of it. You could try to pass something like 'src' prop to Icon, which can be one of various types (img src, raw svg code, etc).
Just my two cents. Hope it helps.
I want to change the style of the side menu but after trying several changes to onsen-css-components-blue-basic-theme.css I can not find the element that contains the edge shadow (see below image). I want to remove the shadow from the menu - which file is this handled by?
<ons-sliding-menu var="menu" id="menusliding" main-page="main.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left" ></ons-sliding-menu>
Generally it's a better idea not to touch generated files as if at some point you decide to change the theme or update the version the changes will be overriden. So instead of trying to change the framework css generally it's better if you just write your styles in a separate file (at least until you decide to push things to production).
And about the question: these things can be found by doing right click => inspect element. If you do that on the element you will be able to see where the styles come from. The way which you're wording your question it sounds like you tried to find it but were unable to. Probably if you looked a while longer you would've been able to find it.
After doing the method described above I was able to find that actually it's defined in element.style of the main content. Some libraries do these kind of things even though it's not very recommended, still it's the most secure way to ensure that the style will be applied.
To remove it you can just do.
.onsen-sliding-menu__main {
box-shadow:none !important;
}
Demo
The class may vary depending on the onsen version. It's not the most elegant solution, but ons-sliding-menu is a relatively old component. In Onsen 2 there is actually an ons-splitter element which combines the behaviours of ons-sliding-menu and ons-split-view. If you use that you will see that the shadow there has been removed.