Less Support for isolation component

How would i use less file in isolation for component in refine antd component?
5 Replies
kapa.ai
kapa.ai11mo ago
Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but according to the information provided, Ant Design has removed less and now uses and recommends CSS-in-JS instead. You would need to manually migrate your .less files to CSS-in-JS. You can refer to the Ant Design's documentation for less migration (https://ant.design/docs/react/migration-v5#less-migration) for more details. Please note that customized or swizzled components and .less files cannot be migrated automatically. You need to migrate them manually. Here is the source for your reference: Ant Design Migration Guide (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below
fascinating-indigo
fascinating-indigo11mo ago
@kapa.ai how will i use variables??
kapa.ai
kapa.ai11mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- In the context of Ant Design and Refine, you can use variables in your custom theme. When you create a Refine app with Ant Design, you can choose to use a customized theme. During the setup, you can select "Yes (Custom Variables)" when asked if you want a customized theme. This will allow you to use variables in your theme. Here's an example of how you might set up your app:
npm create refine-app@latest tutorial -- -p refine-react -b v3
npm create refine-app@latest tutorial -- -p refine-react -b v3
And then select the following options:
Cloned remote source successfully.
✔ What will be the name of your app · tutorial
✔ Package manager: · Npm
✔ Do you want to use a UI Framework?: · Ant Design
✔ Do you want a customized theme?: · Yes (Custom Variables)
✔ Router Provider: · React Router v6
✔ Data Provider: · REST API
✔ Auth Provider: · None
✔ Do you want to add example pages? · Yes (Recommended)
✔ Do you want a customized layout? · Yes
✔ i18n - Internationalization: · No
Cloned remote source successfully.
✔ What will be the name of your app · tutorial
✔ Package manager: · Npm
✔ Do you want to use a UI Framework?: · Ant Design
✔ Do you want a customized theme?: · Yes (Custom Variables)
✔ Router Provider: · React Router v6
✔ Data Provider: · REST API
✔ Auth Provider: · None
✔ Do you want to add example pages? · Yes (Recommended)
✔ Do you want a customized layout? · Yes
✔ i18n - Internationalization: · No
After this, you can use variables in your custom theme. For more details, you can refer to the source (https://refine.dev/blog/how-to-add-darkmode-in-ant-design). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below