i am quite new to react and frontity in itself aswell. At the moment i am trying to get material-ui for my frontity project to work. Today i have seen that material-ui needs to be prepared for a SSR-Framework.
My Problem is now, the index.ts at the moment looks completly different now than it was 2 years ago. I can’t seem to find a way to implement material-ui because of lack in knowledge.
I would gladly appreciate an example on how to do it. Also will frontity in the future officially make this feature happen by default someday?
Welcome to the Frontity community. It might be worth your while taking a look at this demo project which demonstrates the use of an external library - in that case it’s antd, but it should provide you with an example on how to integrate external libraries.
BTW you shouldn’t be making any changes to the core Frontity files. You should just work within your theme.
Main problem is material-ui for react doesn’t use a global css stylesheet. i had some errors using the tab component with material-ui. It said that css classnames differ from server to client side. Thats why i thought you have to get material-ui to render on the server. Still don’t know how to do that. If somone could look at the Server Render Guide on the first post and give me a hint, that would be nice.
Sadly i can’t implement it like antd or bootstrap.
Apologies for the missing documentation on the improved API for extending the server. This is part of the AMP package development, and since the package is not ready the documentation hasn’t been modified in that regard.
Anyways an example with the latest version, for doing custom Server Side Rendering for material ui would be something like I did in this CodeSandobx.
Let me know if there are more questions or that the above is clear enough in it’s approach.
Well … @cristianbote this is gotta be the most helpful CodeSandbox ever. Worked out of the box after core upgrade and integration into the theme. All one needs to do is pickup the beforeSSR code. Done
Maybe it would be a good idea to promote this a little better?
Indeed that’s the plan we just need to finish-up the AMP package. The new APIs are game changer in terms of flexibility and what you one can do with frontity afterwards.
@cristianbote I have a question: Could the Material-UI CSS be injected in a way that the @frontity/amp package could pick it up to add it to the <style amp-custom> tag?
Apart from that, @eiden/@francis/@gno: would you be interested in maintaining a frontity-material-ui package? That way people willing to use Material-UI with Frontity would just need to install a package
As @cristianbote showed, the code is very simple so it should not be hard to maintain.