How to apply drag-n-drop functionality from react-dnd library to TableHeaderColumn component from material ui
The problem is react-dnd does not support custom tags and suggests to wrap TableHeaderColumn in div but material ui does not allow to wrap table component in any tag :(
I can't find any examples by this theme
And the answer is - there are no way to do it with react-dnd, at least for this moment.
So I've ended up using react-sortable-hoc which works as expected in pair with material UI table elements.
Related
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 working on a project and I already use Material UI. Recently, I have encountered an issue finding a checkboxes tree in Material UI and I've found it in Syncfusion. Would it be okay if I imported only the tree component from Syncfusion and use it within my project which already uses Material UI?
Yes, you can install syncfusion/ej2-react-navigations package to use EJ2 TreeView component in your react project.
Refer to the following UG and demo links for getting started with EJ2 React TreeView component.
UG: https://ej2.syncfusion.com/react/documentation/treeview/getting-started/
Demo: https://ej2.syncfusion.com/react/demos/#/material/treeview/check-box
API: https://ej2.syncfusion.com/react/documentation/api/treeview/
Any good examples out there of using AgGrid with React Material UI. Especially around creating custom themes. The examples on the AgGrid site are around css / scss not styled components the preferred approach with React Material UI.
Although it might not be exactly what you are looking for. Try searching for
component types and custom renderers as it contributes to customizing your ag-grid look
I'm having trouble doing the same with my app. I've added a Select component, but it doesn't render correctly. Should I be using a different nested component to create this?
I cannot see an example in material-UI's documentation. I am not sure of the correct styles to use. I am using a Select component here, but I'm not sure if its the same the Material UI website is using as it doesn't seem to inherit the correct style. It would be great if someone can point me to the correct method of adding a drop-down to the Toolbar.
That "dropdown" is actually composed of Button Component and Menu Component.
The docs site is open-sourced and you can check the implementation here.
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.