在 V5 上重写 antd 组件的样式

Question

我想自定义一些用cssinjs编写的antd组件的样式。

我创建了一个 HOC 组件来访问主题并覆盖一些样式并在定义提供程序后调用它

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}</>
}

但是样式优先级有问题

调用 !important 不是最好的方法

如何制作我在下面定义的那些样式？或者还有其他更方便的方法来扩展标准样式吗？

Answer 1

尝试添加!important关键字：

return {
  [`.ant-btn`]: {
    ["&-default"]: {
      backgroundColor: "red !important"
    }
  }
};