border-beam customized color demo
The border-beam component has a demo showing six gradient beam palettes that can be switched between to view different effects.
components
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Extending antd components with HOC
To extend antd components with features that should not be included in antd, use Higher-Order Components (HOC) pattern. antd maintains strict discussion on new components to prevent API corruption and historical debt.
Static methods losing styles when prefixCls set on ConfigProvider
Static methods like message, notification, and Modal.confirm lose styles when prefixCls is set on ConfigProvider because they render to independent DOM nodes outside React context. Solutions: 1) Replace with hooks like message.useMessage, notification.useNotification, Modal.useModal, 2) Use App.useApp to get instances.
defaultValue does not update when changed dynamically
defaultXxxx props like defaultValue for Input and Select only take effect on first render. This is React's specification. To update values dynamically, use the controlled component pattern with value and onChange.
message and notification are functions not React components
message and notification are lowercase because they are functions, not React components. Other Ant Design components are capitalized as they are React components.
Icon file deployment when iconfont unavailable
If icon files cannot be fetched in your network environment, deploy the iconfont file to your own network. After version 3.9.x, Ant Design switched to SVG icons so local iconfont deployment is no longer needed.
Component default language is English
Use ConfigProvider component to wrap your application to change the locale. If date component internationalization still doesn't work, configure dayjs.locale('zh-cn') and verify that your local dayjs version matches the dayjs version that antd depends on.
ConfigProvider prefixCls causes style loss for message/notification/Modal
message/notification/Modal.confirm use static methods rendered separately with ReactDOM.render and cannot share ConfigProvider context. Use Hook versions: message.useMessage, notification.useNotification, Modal.useModal. Alternatively use App.useApp to call these methods with proper styling.
Popup inside Select/DatePicker/Popover disappears
This issue was fixed after version 3.11.0. For older versions, use getPopupContainer prop like <Select getPopupContainer={trigger => trigger.parentElement}> or other getXxxxContainer parameters to render the component inside the parent element.
Popup follows scrollbar movement
Use getPopupContainer prop to render components into the scroll area, e.g., <Select getPopupContainer={trigger => trigger.parentElement}>. For global solution, use <ConfigProvider getPopupContainer={trigger => trigger.parentElement}>. Ensure the parentElement has position: relative or position: absolute.
BorderBeam lineWidth property default and unit
The lineWidth property of BorderBeam controls the beam width. The default value is 1px. When a number is provided, it is treated as pixels.