I have been having some trouble getting the Material-UI expansion panels on my React application to expand once the "expand more" icon has been clicked. I have used the documentation on the Material UI website and set up the react application using npx create-react-app. Below I have attached the code of my component and my package.json. The website displays the panel with the correctly mapped data, but the panel does not expand once clicked. Through some research I read that the latest MacOS update has been having some bugs with css frameworks and animation. Has anyone else experienced this issue? I'm not sure at this point what is causing the error.
package.json
component imports and styling
website display
component render
I think you need to change the onClick props in <ExpansionPanel /> for onChange.
But i have a problem like
Related
I am working on react swipe button. By default it shows "unlocked" on button. I am using react swipe button yarn package . How can I change the text "unlocked" to "Completed"?
I took a look at the source code, and it seems like there's a text_unlocked prop you can pass to the component.
<ReactSwipeButton
...
text_unlocked='Completed'
/>
Note that it doesn't seem to be listed as part of the official documentation, so you may run into problems if the developer did not intend to expose this property.
I'm using a bootstrap theme into ReactJS app. Everything works except the NavBar transition/animation effect on scrolling isn't working. I have noticed in the projects GitHub they are using a script. They are referring this script in the index.html page (the last line within the body tag).
Now, I'm trying to get it working in my ReactJS app but without luck so far. I've created a navbar component and imported into App.JS. I've used same id, "mainNav" for the tag with in my navbar component, but I've noticed that an error in the script. It says "undefined is not an object(evaluating '$("#mainNav").offset().top > 100)' in the browser.
Could you please point me what I'm doing wrong? How can I get the same effect using ReactJS?
Context
New electron user here. I just cloned and installed the recommended React + Electron repo: https://github.com/electron-react-boilerplate/electron-react-boilerplate
Now I want to use Material-UI. So I thought I just follow the instructions here:
https://material-ui.com/getting-started/installation/
After I did this, the app doesn't show me anything from Material-UI. I created a Component with a simple App Bar. But it does show nothing.
So I found out that there is another package.json in the folder /app/package.json
I cd'd into it and redid the installation. Restart the dev server but still nothing shows up (no appbar, just white screen).
Here is a screenshot:
Also according to the docs I should add a link for the roboto font to the html file. Where is this supposed to go? I put it into the only html file I found in app/app.html.
How can one set up Material-UI with Electron or rather this specific boilerplate?
I couldn't find anything up to date for this question.
I found the error. Turns out I imported MenuIcon but material doesn't export it. So when I get rid of it, the appbar renders correctly.
While working on SpeedDial component of React's Material UI the following is needed:
Change the background color of speeddial button
Change the background color of speeddialactions
Change the font size of tooltip displayed on hover over speeddialactions
All this was done successfully earlier with the following dependencies at sandbox URL for working code
- material-ui/core 4.1.3
- material-ui/lab 4.0.0.alpha.18
But now with latest packages I have updated code posted here sandbox URL for semi working code where things are getting bumpy
- material-ui/core 4.6.0
- material-ui/lab 4.0.0.alpha.31
when hovered over speeddialaction there is an error that causes the SpeedDial to disappear. Error details can be seen in the console of sandbox URL for semi working code
This was a bug after I reported to material-ui community and has been fixed in alpha 32 release.Refer at Issue and solution posted here
I've been trying to get Material UI components to work inside an Iframe. Material UI has provided a DemoFrame component for this purpose (https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/DemoFrame.js), but the styles does not get inserted into the Iframe properly. I've created a code sandbox to demonstrate this. Am I missing something here?
https://codesandbox.io/s/rykq8nz4j4
Update:
The demo frame seems to be working correctly in the component demos in material-ui web site. If I look at the source I can see the styles have been injected correctly.
But in my demo the styles does not get injected into the iframe.
Got it to work after updating the packages to the latest versions and adding the following lines to install the material ui styles.
import { install } from "#material-ui/styles";
install();
Demo: https://codesandbox.io/s/rykq8nz4j4