I have been working on this Material UI Rich Text Editor over here
https://www.npmjs.com/package/material-ui-rte
I'm trying to follow best practices for both React and Material-UI so that anyone can pick it up and drop it in their project and it just works with Material
I'm having an issue where after running my build script and trying to actually import the editor into a project, I'm not getting any theme passed into the components in the editor, so palette colors or font families are not being represented in the editor at all which I thought they would be
When actually cloning the repo and running the start script, playing with the demo works with the theme when pulling the Editor from the src component but pulling it in from the lib directory like a normal use case would does not work with the theme.
Here is a codesandbox to illustrate this, I've set the theme to have a text color of lime green and the editor is not rendering this color at all. But if you clone and run the actual repo, the editor does use the lime color
https://codesandbox.io/embed/create-react-app-dw7gh
I would love some direction on this. Am I doing something wrong or missing something that material expects? Did I set up my build script wrong?
The theme propagation relies on a singleton to work. I would encourage the usage of #material-ui/styles as a peer dependency. Right now, it seems that you publish it: https://unpkg.com/material-ui-rte#1.1.3/lib/index.js. You should change that.
Related
In the micro-frontend every application would be running separately, in that case, each one of the applications will be having its own CSS.
Let's assume we are taking MUI as the UI library. So each application that uses MUI will be having its own theme provider.
Now the stakeholder wants to change the button's color from blue to black, in this scenario I have to manually go and change the color to each one of the applications separately.
Do we have to do like this only or any other pattern is available in Micro-Frontend to solve this Design System issue?
Please help me with your suggestions !
You can create a theming package for your micro-frontend apps. This package provides a theme object for Mui ThemeProvider. It can have some default theme properties and some additional (editable) properties which from an API.
Then you need a portal where your client or stakeholder can edit the theme, from some theme editor app. Basically, that will UPDATE your theme object (database).
Your package will GET those changes and update all your micro-frontend apps. I have seen a similar kind of implementation in a Turborepo app.
I am trying to use one of the platinum themes from React Material-UI, link below:
https://material-ui.com/premium-themes/
but I can't find instructions for how to use them in my application. Can someone explain how can I use a platinum theme in my React application?
To use one of the free premium themes, just click the link to go to the "Source Code" and then you can look at the code for the example. For instance, for the Paperbase theme you can find the source code for the theme here: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/premium-themes/paperbase/Paperbase.js.
Just copy the parts you want to leverage into your own project and then you can modify it as desired.
I have to make interface suitable with two different color themes - light and dark. Color theme is being selected by user via button/switch/whatever.
The problem (as I think) is that my React application is being bundled via Webpack, so all my SASS-compiled styles is being embedded into the main HTML template as <style>...</style> (each style tag references to its SASS-file). I know, that I can assign some class name to app wrapper and then write nested style for every selector that needs to be recolorized. But it is not such productive as, for example, import necessary SASS file depending on what color theme was selected by user.
Is there any way to solve this problem in a better way?
I am trying to play around with the Material Design stuff for AngularJS. The Project can be seen here. I'm trying to do a basic project. This has led me to two questions about material design.
How do I use an icon for a button? I ran git submodule update --init per the docs. I have the icons directory. However, I do not understand how to actually use a button. For instance, I want to use the refresh icon (/icons/system_icons/av/res/2x_web/ic_loop_24dp.png), so I'm trying the following:
However, the icon is off-center. How should I fix this?
How do I setup navigation up in the app?
Thank you!
Ok. Starting over with this. I see that the SocialBoo theme has something similar in what I want to achieve. If I find that I can work and improve. I Added a new socialboo theme and created blank GUI. Assumed it would be a Commandbehavior but that didnt do the trick, so did adding tabs. Seems like those components are not for that specific bar... However did notice another issue.
How do I get the social actionbar as displayed in the socialboo theme? (Screen shot). Assuming those images etc are part of the default theme, right.
Also, If I create a TouchCommand = bar, title or native. It displays fine in Gingerbread but not ICS. DO you know why is that? (screen shot)
Thanks, in advance.
Those images aren't a part of the theme, they are a part of the specific demo. If you add a Tabs component to the center of the border layout UI you will get thee tabs where the "icon" property will allow you to customize the unselected icon and you can customize the selected icon as well. You can see the full source/resource file of the social boo demo in the docs and demos zip in the download section.
Generally customizing commands is a bit complex because of platform specific constraints, when running on an Actual Android 4 device we use the native ActionBar by default to provide the experience Android users are used to. This is hard for us to simulate so you will only see this properly in the device build. I suggest not relying on commands, it seems that what you are trying to achieve is easily doable with tabs and its possible that's why you had difficulties in your other question.