ReactJS SOLID Principle　~LSP (Liskov Substitution Principle)~

・In React, LSP indicates that when you expand the base component or HTML, you should not break base functionality. Bad code // You can not use the normal button const CustomButton = ({ label }: { label : string }) => { return < button > { label } </ button >; }; // The onClick is ignored if you pass. And type is an error. < CustomButton label = "preserve" onClick = { () => alert ( ' Preserved ' ) } /> Good code You should extend all attributes of the button and pass it. import { ComponentPropsWithoutRef } from ' react ' ; //Define the type to receive all of the attributes interface ButtonProps extends ComponentPropsWithoutRef < ' button ' > { variant ?: ' primary ' | ' secondary ' ; } const CustomButton = ({ variant , children , ... rest }: ButtonProps ) => { const style = variant === ' primary ' ? { backgroundColor : ' blue ' } : {}; // pass all of the attributes such as onClick or type by `...rest` return ( < button style = { style } { ... rest } > { children } </ button > ); }; < Cu