ReactJS Anti Pattern　~Including too much detailed CSS in shared components~

・If you define “context-dependent styles” such as margins, padding, and heading sizes within a shared component, the resulting design may not align with the user's intentions. Responsibility for layout should be delegated to the component caller as much as possible. Bad example export const BadCard : React . FC < { className ?: string } > = ({ className , children }) => ( < section className = { [ " w-full rounded-md bg-white p-6 shadow-md " , " mt-8 " , // Apply style that should be applied from caller " [&_h3]:mt-6 " , " [&_footer>button+button]:ml-3 " , className , ] . filter ( Boolean ) . join ( " " ) } > { children } </ section > ); ・If margins or the styles of internal elements are fixed, unexpected layout issues may occur in different layout contexts, such as when “cards are arranged side by side” or “the gap property is used on the parent element.” Good example ・Components should be limited to minimal visual elements such as background color, borders, and rounded corners. To al