前端问题，假如为一个被很多地方用的基层组件加新功能，你会怎么做

假如有这样一个 NavBar 组件，被 50%以上的页面使用，下面 React 简略代码

interface NavbarProps { BackAction?: ({ navigation, ...rest }) => JSX.Element Content?: ({ title, ...rest }) => JSX.Element Action?: ({ ...rest }) => JSX.Element title?: string } const Navbar = (props:NavbarProps)=>{ const {BackAction = DefaultBackAction, COntent= DefaultContent, Action = DefaultAction, title, } = props || {} return <div className="flex flex-row"> <BackAction {...defaultBackActionProps}> <Content {...{...defaultContentProps,title}}/> <Action {...defaultActionProps}/> </div> } // demo return <Navbar title="title" /> 

现在你要给这个组件的 title 加一个标题为当前播放音乐主题色的功能，但是只有 1 个页面会用到这个功能

const color = useMusicThemeColor() 

请问你选择哪种方案？

1.增加一个 isMusicTheme=true ，然后把 useMusicThemeColor 放在 NavBar 内部

 <Navbar title="title" isMusicTheme={true} /> 

2.override Content ，把 useMusicThemeColor 放当前 page

const color = useMusicThemeColor() ... <Navbar title="title" COntent={({...rest,title})=>{ return <div {...rest} style={{color}}> {title} </div> }} />