other-emerald•2mo ago

Create new app with AntD gets some deprecation messages

After creating the app using the web refine.new with vite+restAPI+antd when installing and running start dev in the console I have this kind of messages:

hook.js:608 Warning: [antd: Drawer] `bodyStyle` is deprecated. Please use `styles.body` instead. Error Component Stack
    at Sider (<anonymous>)
    at div (<anonymous>)
    at Layout (<anonymous>)
    at div (<anonymous>)
    at ColorModeContextProvider (index.tsx:20:3)
    at App (<anonymous>)

hook.js:608 Warning: [antd: Drawer] `bodyStyle` is deprecated. Please use `styles.body` instead. Error Component Stack
    at Sider (<anonymous>)
    at div (<anonymous>)
    at Layout (<anonymous>)
    at div (<anonymous>)
    at ColorModeContextProvider (index.tsx:20:3)
    at App (<anonymous>)

I want to avoid this kind of messages and have a clean console without warnings

3 Replies

kapa.ai•2mo ago

Hi @Sebastos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- These deprecation warnings are related to recent changes in Ant Design v5, which is used by refine. To address these warnings and clean up your console, you'll need to update some of the component props. Here's how you can resolve this issue: 1. For the Drawer component, replace bodyStyle with styles.body:

<Drawer
  // Old way
  // bodyStyle={{ padding: 24 }}
  
  // New way
  styles={{ body: { padding: 24 } }}
>
  {/* Drawer content */}
</Drawer>

<Drawer
  // Old way
  // bodyStyle={{ padding: 24 }}
  
  // New way
  styles={{ body: { padding: 24 } }}
>
  {/* Drawer content */}
</Drawer>

2. For other components like Card, you may need to make similar changes:

<Card
  // Old way
  // headStyle={{ fontWeight: 'bold' }}
  // bodyStyle={{ padding: '20px' }}

  // New way
  styles={{
    header: { fontWeight: 'bold' },
    body: { padding: '20px' }
  }}
>
  {/* Card content */}
</Card>

<Card
  // Old way
  // headStyle={{ fontWeight: 'bold' }}
  // bodyStyle={{ padding: '20px' }}

  // New way
  styles={{
    header: { fontWeight: 'bold' },
    body: { padding: '20px' }
  }}
>
  {/* Card content */}
</Card>

These changes are part of the migration process from Ant Design v4 to v5. The refine team is aware of these issues and is working on updating their templates and examples to reflect these changes. For more detailed information on migrating your refine project that uses Ant Design, you can refer to the following resources: 1. Refine Ant Design Migration Guide (https://refine.dev/docs/ui-integrations/ant-design/migration-guide/) 2. Migrating from 3.x.x to 4.x.x (https://refine.dev/docs/migration-guide/3x-to-4x/#pankodrefine-antd-changes) These guides provide comprehensive information on updating your refine project to use the latest version of Ant Design and resolve deprecation warnings. If you're starting a new project, make sure you're using the latest versions of refine and Ant Design to avoid these deprecation warnings from the start. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@689846866837373077> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

harsh-harlequin•2mo ago

Hello @Sebastos, it's comes from here: https://github.com/refinedev/refine/blob/main/packages/antd/src/components/themedLayoutV2/sider/index.tsx#L234 there is currently no problem preventing the app from working, but ofc we will update deprecated props in the future. If you want to work on this, we are open to all contributions 🙌

Create new app with AntD gets some deprecation messages

Did you find this page helpful?