I have an Nx micro-frontend project that uses React and MUI and I am attempting to theme the host/container app and have that provide the theme to all children of the host/container.
However, I have ran into some issues when I attempt to import MUI components certain ways I get warnings in the console or the theme not being shared to the children. This seems to depend on the way I import the ThemeProvider and the MUI components.
If I use the ThemeProvider from "#mui/material/styles" with named MUI imports, the theme doesn't apply! And if use default imports, I get a warning:
You are loading #emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.
(and the remote theme isn't affected anyway)
If I use the ThemeProvider from "#mui/material" and use named imports, then everything works as expected.
However I'd prefer not to import all #mui and use default imports for each component.
Is there a correct way to have MUI and MFEs have a single theme AND have default imports?
Related
Let's say in my React project (TS if that matters), I have a custom components module that exports a component called Button. I also have a third party library in node_modules that also exports a component called Button. Is there a way to tell VS Code to prioritize my own module over those in node_modules for auto-import - i.e. I want my own modules to show up at the top of the import suggestion list rather than the third party node_modules ones if I type JSX like <Button.
The title already says it and we do have a working example. However, the library we have built does have it's own customTheme and uses styles to such an extent that we cannot just copy them to the projects importing the library.
Right now we do get the following error on multiple developer machines:
It looks like there are several instances of #material-ui/styles initialized in this application.
This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
See https://material-ui.com/r/styles-instance-warning for more info.
Is there a best practice for creating Material-UI components in a library which can then be reimported into other projects with its styles and everything of course then inheriting colours etc. from the project the library is imported to.
VSCode allows developers to define custom tasks in .vscode/tasks.json. How to inherit VSCode's tasks.json?
tsconfig or tslint could be inherited using extends "keyword". However I have not found such option in tasks.json schema.
My use case: I have a common library that is shared across projects. The library also define various common gulp tasks. Each project inherits gulpfile, tsconfig, tslint from the common library. The only problem is with .vscode/tasks.json especially with custom problem matchers.
If the task inheritance is not yet possible, how to reuse custom problem matchers?
I am trying to use material-ui from Kotlin. (Am going quite well and will release it to the public if it all works OK.)
I am a bit of a newbie to Javascript (and Kotlin for that matter).
I am looking for a simple way to expose a theme to my components. I have looked at the withThemes stuff, but it is not working supper well for me.
I would like to define some type of global (maybe) theme object.
Is there an easy way to get the current theme without wrapping the component using withThemes?
Thanks for any help.
C
I got Material-UI working from Kotlin. (I have created a Kotlin wrapper - MUIRWIK), and in particular, for the question it is the MuiThemeProvider that provides the more or less globally accessible theme object.
Since the question was made, JetBrain released a wrapper library called kotlin-mui that brings Material Design UI to React components from MUI.
i am working on theming concepts in SAPUI5 application.
I got to know that the theming can be done by using UI Theme Designer (which is a tool in SAP backend).
I got to know this from here.
Is it possible to develop a custom theme in SAPUI5 with out using Theme Designer.
There is a range of options, Theme Designer being the easiest and least flexible one, a completely written-from scratch CSS file the other extreme.
In between there are options like copying an existing theme, renaming it, and appending CSS parts that modify the existing appearance (this is also possible in Theme Designer!).
One main deciding factor is how different your theme should look from an existing one, and what your upgrade strategy is. Very different themes might be best created using the "base" theme as... well, base. But whenever you create lots of extra CSS you need to be aware that you have to adapt it to new UI5 releases. The Theme Designer does this automatically, as long as you don't add any custom CSS.
Before writing a theme from scratch or vastly modifying one, you should look at how large existing themes are and estimate whether you want and can develop and maintain such a thing on your own.
(Why are they so complex? 200 controls - and that's only the OpenUI5 subset - and many of them very powerful with different appearances and responsiveness, working across devices, and also appearing in right-to-left mode,... that's something no other framework offers, so of course the UI5 themes are larger than those of much smaller frameworks.)