Overriding styles antd component on V5

[meded90]

I want to customize the styles of some antd components written in cssinjs.

I created a HOC component to access the theme and override some styles and call it after defining the providers

import { useToken, useStyleRegister } from 'antd/es/theme/internal'
import { prefixCls } from 'Src/constants'
import { ReactNode } from 'react'
import { CSSObject } from '@ant-design/cssinjs'
import { GlobalToken } from 'antd/es/theme/interface'

function getStyleButton(token: GlobalToken): CSSObject {
  return {
    [`.${prefixCls}-btn`]: {
      ['&-default']: {
        backgroundColor: 'transparent '
      }
    }
  }
}

export const OverloadStyle = (props: { children: ReactNode }) => {
  const [theme, token, hashId] = useToken()

  useStyleRegister(
    {
      theme,
      token,
      hashId,
      path: ['OverloadStyle']
    },
    () => [
      getStyleButton(token),
    ]
  )
  return <>{props.children}</>
}

but there was a problem with style priority

calling !important is not the best way

![Uploading image.png…]()

how to make those styles which I define were below? Or are there other more convenient ways to extend the standard styles?

https://stackoverflow.com/questions/75286685/overriding-styles-antd-component-on-v5

[pooryak]

have you found any solution? @meded90

[meded90]

You can call OverloadStyle at the bottom of react tree after app

<>
  <App/>
  <OverloadStyle/>
</>

but at the same time, it is important that the components you override must be initialized, if you have asynchronous loading of modules this may not work. so i just use !important

[vipslord]

srsly? you just recommend to put !important? better rename class to css-dev-only-do-not-override-just-use-important-for-hashPriority