Just experimenting with antd's React based UI kit, however it seems that some of the input components not rendering as they should, ex. as a dropdown.
Please see below a random component and how it's being rendered (I added 2 components within mine, TimePicker and DatePicker to demonstrate this)
Looking through the docs I understood that these input or form components must be wrapped within < Form > and < Form.Item >, I tried with and without these.
I also tried both with and without providing default props, still nothing, the documentation doesn't mention these as mandatory ones.
render() {
return (
<div>
<Form>
<Form.Item>
<TimePicker/>
<DatePicker/>
</Form.Item>
</Form>
</div>
);
}
actual: [actual render][1]
expected: https://ant.design/components/time-picker
Thanks guys!
update: I created a new react app on my work mac using npx create-react-app (yesterday I used my personal windows) and had npm i antd. I made sure I have nothing in the new app which could cause issue, only the boilerplate, then I added a component exactly how it is in the ant design documentation.
I am still experiencing the same issue. Sure it's missing something fundamental within ant-design but it seems it's not in the documentation. Anyone who ever used the ant-design components with react, have you done anything specific apart from installing the package and importing the components before using?
It looks like it disregards the css.
In case if anyone else is experiencing this, found the solution:
Antd's css was not applied because I forgot to import it to my App.css:
#import '~antd/dist/antd.css';
Simple mistake to make.
Solution was found in the below link:
https://github.com/ant-design/babel-plugin-import/issues/89
mthrsj also asked about this, I overlooked it when I checked.
Related
i am using React-Big-Calender, i want to make my event resizable. I am able to implement dnd of events but somehow events are not resizing. I took reference from official example (https://github.com/jquense/react-big-calendar/blob/master/examples/demos/dnd.js) but still not able to make it work. Please help..!
Link to my codeSandBox : https://codesandbox.io/s/wonderful-darwin-35hq4?file=/src/CalenderIndex.jsx
I recently came across this and it ended up being due to my react and react-dom version being 17.0.1. It looks like they changed how some DOM events are handled (https://reactjs.org/blog/2020/10/20/react-v17.html) which causes the resizing event not to fire in react-big-calendar. The best fix for now is probably just to downgrade react and react-dom in your package.json (I went to "16.13.1" it is working fine)
I think with the latest version of react-big-calendar v0.38.1 everything works fine without any issues even with react and react-dom v17.0.2. I just had a bit of a hard time figuring out that I need to include the dragAndDrop styles import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'; as well otherwise the handlebars for resize are not shown at all.
I'm trying to figure out why the loadeddata/loadedmetadata event is not firing in my application. Actually, sometimes it does fire but it's inconsistent. I suspect there is some kind of race condition going on here but after a lot of trial and error and quite a lot of frustration, I'm out of ideas.
So, the idea is simple. I have an <audio> element and I want to run some logic when it is loaded.
This seems to work when I try it in a non-Nextjs React application. Example here
However, when I run the same thing in my Next.js React application locally I observe the aforementioned behaviour, so I suspect that this could be nextjs specific?
This can be minimally reproduced by:
Running npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
Replacing the existing index.js with:
export default function Home() {
const handleMetadata = () => {
alert("hi")
}
return (
<div className="container">
<main>
<audio
id="audio"
onLoadedData={handleMetadata}
onLoadedMetadata={handleMetadata}
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
/>
</main>
</div>
)
}
Repeatedly refreshing the browser window
you should load the compoent which use audio with no ssr.like this:
import dynamic from 'next/dynamic'
const AudioPlayer = dynamic(import('../components/Home'), {
ssr: false
})
This isn't a direct answer but I wanted to share that #YAN7 answer above solved a similar issue for me. I was developing a component in Storybook that was using GSAP scroll trigger to scrub play a video. It worked perfectly in Storybook, but when I went to import it and use it in the UI/Next Js project, it wouldn't work as expected. Occasionally I managed to get the animation effect to work, but most of the time I couldn't. After a lot of console logging, I realised the only significant difference between the two examples was one was in Next and the other wasn't. Which eventually lead me here. I dynamically imported my component into Next as in YAN7's example and it worked perfectly. Many thanks YAN7! I hope this comment helps other GSAP + Next devs in the future
I had a certain bug that I was unsure how to debug. The bug is that styling that I use for a create-react-app (Typescript) app through material-ui and regular CSS, shows up just fine in development but it shows differently for certain CSS properties when I deploy the app online (I've only tried Heroku and Vercel). The app doesn't show any errors or warnings in the console when I'm developing. I have no idea why it's happening and I've tried the following so far
Read through my code many times being extra careful at every step.
Open the website (development and production) in incognito mode on Chrome 85.0.4183.83 (Linux, 64 bit)
Look through the documentation for material-ui (material-ui.com) and the React docs for any lead on this
Search google for prior such issues
So far, nothing has turned up. Could someone please guide me in the right direction?
The build pack I use on Heroku after deployment is the well known one by mars and available at https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz .
For convenience, I have included my package.json here on pastebin.
Thank you so much for helping out.
============= EDIT =============
I've been experimenting with the code and it seems like the problem lies with how material-ui is compiled during build time. The problems which don't show up in development, show up in production.
For example, the biggest thing I noticed is if you mix custom style prop flags given by the material-ui components and add your own styling with className or style, during build time these latter styles are overridden partially if not completely.
So if I do
import React,
{ useRef } from "react";
import {
Button,
makeStyle,
Theme
} from "#material-ui/core";
/*
Start of functional component using memo
.
.
.
*/
const useClasses = useRef(makeStyle((theme : Theme) => { return {
buttonStyles:
{
backgroundColor: theme.palette.text.hint
}
}}));
const styles = useClasses.current();
<Button
color={"secondary"}
className={styles.buttonStyles}>
button text
</Button>
/*
.
.
.
*/
in development, the button will have the backgroundColor I give it in makeStyles, but in production that property will switch to secondary as given in the color prop which defaults to the value theme.palette.secondary.main.
And sometimes, just even using a component from material-ui without any extra config causes a problem.
I am also using code splitting with lazy and Suspense if that matters.
StackMatch can you please link your github/gitlab repo? I think I might know what the problem is but can't be certain without seeing how your dev environment is configured.
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
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