I am using a basic implementation of Material UI drawer. I modified the code on their website. They have used buttons. Now when I click at a button for example ‘INBOX’, I want to go to a new page. The new page is at ‘/new’. I used Route from react router to create this. Now, how can I edit my
Tag: material-ui
Material UI – TreeView datastructure
I want to structure the data that I get from a server, so I can use the TreeView component from Material UI: https://material-ui.com/api/tree-view/ I’m fetching large amounts of data so I want to fetch child nodes from the server when the user clicks on the expand button. So when the first node is expanded a HTTP request is sent to
How can I use Material-UI Autocomplete together with react-virtualized?
I’m using the Autocomplete component from Material-UI in a project. Since I have a lot of options to render, virtualization would be very beneficial. So I started from the virtualized example in the docs with react-window. Everything worked great, but the project already has a dependency on react-virtualized and I would like to avoid adding a new one that solves
Using classnames to dynamically style component with CSS based on props value
I am creating a set of reusable components (wrapped material-ui) which are being styled using CSS. I need to set the width of the component dynamically via a prop passed into the custom button. I want to use classnames to merge the const root style defined for MyButton (I have stripped this back in the sandbox, but it sets colours,
Is there a non-hook alternative for the React Material-UI makeStyles() function that works for class Components
Im using the makeStyles() function in material-UI’s react library, and am getting the following error Hooks can only be called inside the body of a function component. Below is an example of the kind of code I am using. I know the error is being thrown because I’m trying to use makeStyles() in my class component (As shown above). However,
What is the difference between the different ways of importing material-ui components?
From reading the material-ui documentation and online examples, there seem to be different ways of importing the same item: What is the difference between the different way of doing an import? Answer The main difference occurs when bundling. Using the named import: pulls in the entire @material-ui/core module. That means you bundle everything in the module (and all of the
Scroll to selected list item in material-ui
I have a list, build with material-ui. There are a lot of items in it, so scrollbar is visible. What I would like to do is scroll to the selected item. Have any ideas of how to implement this? Here is a demo sendbox link After click on the item list should looks like this (selected item is in the
Invalid hook call. Hooks can only be called inside of the body of a function component
I want to show some records in a table using React but I got this error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: You might have mismatching versions of React and the renderer (such as React DOM) You might be breaking the
Center component inside the material-ui grid
I want to use same cards and make them center aligned, I searched and tried some solutions but all of them align only the component grid, and not the component content itself (I need them to be equally distant form the borders and from themselves). I’m using this code (https://codesandbox.io/embed/32o8j4wy2q): The card code is irrelevant but I just copied the
How select part of text in a Textfield on onFocus event with material-UI in React?
I have a modal form with material -UI TextField in react app, I have a default value, es. a file, and i would select only the name of the file no the extension when the element is load…. I did this code inside the tag TextField: but this will select all text inside the textField. How can I select only