Some help with injecting styles #1804
Replies: 3 comments 6 replies
-
|
Thanks for reaching out and, yes, being able to integrate tools such as antd with vike-react is very much a priority. Can you publish a minimal example of using antd with Vike but without vike-react? I'll then accordingly create hooks on vike-react's side. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the response, it is highly appreciated! :) Example and explanationExample can be found here In theory, not a lot is needed to get it working. (from what i can tell anyway, as mentioned I'm pretty new to this.) I had to alter const pageHtml = ReactDOMServer.renderToString(
<StyleProvider cache={extractStaticStyle.cache}>
<Layout pageContext={pageContext}>
<Page />
</Layout>
</StyleProvider>,
);Then, get the styles from that thing const styles = extractStaticStyle(pageHtml).map((item) => item.style);And also add them to the head ${dangerouslySkipEscape(ReactDOMServer.renderToString(styles))}`Tbh, the StyleProvider part could probably be moved into the layout and is not even needed i believe. Guess it's used for performance reasons, since it get's passed the cached. TestingIf you remove the styles entry from the |
Beta Was this translation helpful? Give feedback.
-
|
I just pre-released this change as |
Beta Was this translation helpful? Give feedback.
-
|
Yes! This seems to work perfectly @brillout, thanks! For future reference. Getting the styles injected was pretty straightforward. In my layout file i wrapped the app in a Style provider <StyleProvider cache={extractStaticStyle.cache}>
<App />
</StyleProvider>And in import { extractStaticStyle } from "antd-style";
import { useConfig } from "vike-react/useConfig";
import type { PageContext } from "vike/types";
export default (pageContext: PageContext) => {
const config = useConfig();
const pageHtml = pageContext.pageHtmlString;
const styles = extractStaticStyle(pageHtml).map((item) => item.style);
config({ Head: styles });
};Which stops the The page from flashing when reloading. |
Beta Was this translation helpful? Give feedback.
-
|
Neat 👍 Up for publishing an example? I'll then create |
Beta Was this translation helpful? Give feedback.
-
|
Will do, I'll try to get it to you over the weekend. I'll adapt the overall layout as well to make it a bit more like the entire app uses ant design. |
Beta Was this translation helpful? Give feedback.
-
|
👍 FYI you can also use https://vike.dev/Wrapper which would be slightly more idiomatic. |
Beta Was this translation helpful? Give feedback.
-
|
I've setup an example over here It has an ant design version of the default "todo, star wars and counter example". Also used the Wrapper component as suggested. Let me know if you'd like something else added or if something is missing. Cheers, Lewis |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I've added your example to the docs https://vike.dev/antd. Also, a Vike extension |
Beta Was this translation helpful? Give feedback.
-
Hi,
I already posted on an issue which i think is somewhat related. (vikejs/vike-vue#141) But this appears to be the better place to ask the question. :)
We are currently starting to move over from a very old stack and are heavily tied to ant.design
We currently have vike set up with vike-react. And are using ant.design for our ui stuff.
As per their guide, i should be able to extract the css and inject it into the page. their ssr docs. I believe having my own onRender should do the trick. Though i would lose whatever vike-react has per default, which i would like to keep as well.
So, I'm having a hard time figuring out how this should be achieved in combination with vike-react, any pointers on what the best approach would be are welcomed :)
Cheers, Lewis
Beta Was this translation helpful? Give feedback.
All reactions