-
Notifications
You must be signed in to change notification settings - Fork 26.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
AMP is not working with Material-UI #9041
Comments
@dmdb FYI, in case you want to pick this up, an effort to fix this was started in #7954, I'm not 100% sure where this should be headed, but I guess the with-typescript-styled-components` example should be updated to use styles: [
...React.Children.toArray(initialProps.styles),
...sheet.getStyleElement(),
], to make it work and compliant with the types. I can only guess that the same kind of setup was used in other CSS-in-JS examples and will have the same incompatibilities with AMP. |
@Janpot Unfortunately I'am not quite confident to pick it, I've just monkey-patched it in our project (thanks to @tomevans18) with PS. Thanks for AMP support on Next.js team. It is a huge benefit |
We have updated Material-UI's examples to work with Next.js and AMP, and now waiting on mui/material-ui#18044 to solve the TypeScript part of it. |
I am trying to get nextjs with amp and material-ui to work, but the styles don’t get included in amp mode (works in non-amp mode). Is there any minimal example? |
@oliviertassinari saw this and wanted to mention that NextJS has a custom Html component within If you look at docs here, there's a new Html component to use within _document.js And that component adds an amp prop which is required for AMP support. https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/ We can add it in if you'd like |
@KyruCabading As far as I know, we have fixed this issue, it can be closed. |
Opened mui/material-ui#20463, good catch @KyruCabading |
@timneutkens Thanks, we are making progress: However, when I try to render this page import React from 'react';
import TextField from '@material-ui/core/TextField';
export default function BasicTextFields() {
return (
<div>
<TextField id="standard-basic" label="Standard" />
</div>
);
}
export const config = { amp: true } I get the following error:
I'm investigating. |
It works if I comment the import React from 'react';
import TextField from '@material-ui/core/TextField';
export default function BasicTextFields() {
return (
<div>
<TextField InputLabelProps={{shrink: true}} id="standard-basic" label="Standard" />
<TextField InputLabelProps={{shrink: true}} id="filled-basic" label="Filled" variant="filled" />
<TextField InputLabelProps={{shrink: true}} id="outlined-basic" label="Outlined" variant="outlined" />
</div>
);
}
export const config = { amp: true } |
We use |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Examples bug report
Example name
https://github.com/mui-org/material-ui/tree/master/examples/nextjs
Describe the bug
If you turn on AMP-first on a page, for example on about page:
![image](https://user-images.githubusercontent.com/427746/66646058-4377b180-ec4f-11e9-9630-a09b1c82d148.png)
![image](https://user-images.githubusercontent.com/427746/66646096-64400700-ec4f-11e9-9ea1-2927a55335cb.png)
You will get error
To Reproduce
Expected behavior
AMP is working fine with Material UI
System information
Additional context
It maybe problem with material-ui example or other styling integrations. Here is some similar as I think issues:
#7856
mui/material-ui#17784
The text was updated successfully, but these errors were encountered: