Replies: 3 comments 1 reply
-
|
You cannot configure a babel plugin in remix, since remix does not use babel. It uses esbuild. There is a super alpha esbuild-plugin, but until this gets more stable, I would recommend importing the styles like you described and as Ant Design recommends in their docs. |
Beta Was this translation helpful? Give feedback.
-
|
@ccssmnn I think the doc page you linked to has changed, because I made an issue here: ant-design/ant-design#40087 |
Beta Was this translation helpful? Give feedback.
-
|
I got it to work like this (warning it is terrible): import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'
import { Segmented } from 'antd'
export async function loader({ request }: LoaderArgs) {
const cache = createCache()
renderToString(
<StyleProvider cache={cache}>
<Segmented options={[1, 2]} />
</StyleProvider>
)
const styleKeys = Array.from(cache.cache.keys()).filter(function (key) {
return key.startsWith('style%')
})
const styleText = styleKeys
.map((key) => {
return (cache.cache.get(key)?.[1] as string[])[0]
})
.join('\n')
return json(
{ styleText },
)
}
export default function App() {
const { styleText } = useLoaderData<typeof loader>()
return (
<html lang="en" className="h-full">
<head>
<Meta />
<Links />
<style dangerouslySetInnerHTML={{ __html: styleText }} />
</head>
... |
Beta Was this translation helpful? Give feedback.
-
|
Did you ever find a better solution to this? I'd really like to support dynamic themes in my remix app without the FOUC. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
What is the new or updated feature that you are suggesting?
yeah，in order to use antd，I need to do：
This way will load the styles of all components。
babel-plugin-import solve this problem，But I don't know how to configure it in remix。
ths
Why should this feature be included?
use antd & babel-plugin-import
Beta Was this translation helpful? Give feedback.
All reactions