I have created a MUI theme which works as expected. However, I am also using a custom component library created using create-react-library(https://www.npmjs.com/package/create-react-library) in my application. The library uses the material UI components too. The problem I am facing is that the theme I have created in my application is not getting applied to the components in the library.
This is behaving weird because if my page uses only components from my custom library then the theme is not applied to the library component, however, if the page uses a mix of custom library components and Material UI components(like Button, TextField) then the theme is applied.
Related
Do we have a Form Builder that creates dynamic forms with all the form elements in ReactJS using Material UI?
We have found one open-source form builder which is forms.io. It has very extensive features. But it comes with Reactjs and Bootstrap CSS.
Any suggestion for the form builder which uses reactjs with MUI?
You can refer to the FormControl API on MUI. It would be better to create your own form using the MUI components along with React rather than depending on another extrnal library as it would provide more flexibility with your form in long term. You can use Formik to validate your form components easily.
If you want to go ahead with a form builder library, try React Material UI Form Builder.
We are currently using React Material UI for a big e-commerce site that requires a CMS.
The problem is that we need to give the elements in the CMS (that are configurable as pure HTML containers) the ability to use the same component animation and style as what we used in the MUI configuration in react.
Is there any way we can achieve this?
In other words, how can we create a html library from React Material UI?
I am try to add some CSS to my components. However, when the website renders the custom CSS is always removed. I am styling my own pages and do not override the CSS of third parties, at least not consciously. I am using Material UI and NextJS and realised that while following this
that all server-side CSS is removed. I suspect that this is the issue, but not sure how to work around it. The CSS is just custom to the component and follows the naming convention of Next :
[filename].modules.css
Does anyone know what do do?
How can a ref be added to a material-ui Box component in React, using TypeScript? This is important to allow animation libraries like GreenSock / GSAP to animate nodes. Per material-ui docs, using the itemRef will not work because it requires the use of findDOMNode which is deprecated in strict mode (prep for concurrent React) and further is likely to break due to virtual DOM rendering.
Without the ability to associate a ref to ALL MATERIAL-UI GENERATED NODES, there is not a reliable way to integrate animation libraries targeting specific nodes.
There are several related issues on the material-ui GitHub project. I posted a workaround on Issue #17010 until such time as material-ui includes the ability to add ref to all generated nodes.
Related Issues:
How can a ref be added to a Box component? #19284
[Box] Allow ref on Box #19275
ref missing from Box in TypeScript definition #17010
Interim Workaround:
// 1. Import style library, either Emotion or Styled-Components
import styled from "#emotion/styled";
// 2. Recreate the Material-UI Box with a styled component
const StyledBox = styled(Box)``;
// 3. Usage in the render
<StyledBox ref={boxRef}>Box Content</StyledBox>
NOTE: Using #material-ui/core/styles does not work, requiring the use of emotion or styled-components. We are forced to use emotion over styled-components due to an animation flicker problem uniquely generated by styled-components.
Is there any recomended way how to style third-party components such as react-paginate
with Material-UI primitives (bars, buttons)?
Is it possible at all?
One of the best ways to do this today is use styled-components. These allow you to pass in any 3rd party component and style them to your needs. Here is any example of how to do this with antd. Would be similar for you, except using Material UI components.