Less Support for isolation component

How would i use less file in isolation for component in refine antd component?

5 Replies

kapa.ai•13mo 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•13mo ago

<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below

fair-rose•13mo ago

@kapa.ai how will i use variables??

kapa.ai•13mo 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•13mo ago

<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below