Oye, uso bootstrap con React y trato de averiguar cómo puedo extender mi componente al pasar los accesorios de className más profundamente. En mi componente atom tengo dos archivos. El primero con declaración de componente.
Breadcrumb.js

 export const Breadcrumb = (props) => { const { className } = props; const classes = getClasses(className); return ( <Link to={props.path} className={classes} {...props}> {props.children} </Link> ); };

y otro con getClasses() que devuelve todas las clases BS predeterminadas.
Breadcrumb.style.js

 export const getClasses = (extra = "") => { const defaultClasses = getDefaultClasses(); const addingClasses = extra; const classes = `${defaultClasses} ${addingClasses}`; return classes; }; const getDefaultClasses = () => `ps-3 fs-3 fw-bold text-decoration-none`;

Lo que quiero lograr es que, cuando invoque mi componente Breadcrumb, y decida extenderlo en clases adicionales, puedo hacerlo pasando los accesorios className ... como
TopBar.js

 export const TopBar = () => { const breadcrumbs = useBreadcrumbs(routes, { disableDefaults: true }); const classes = getClasses(); return ( <div className={classes}> {breadcrumbs.map(({ match, breadcrumb }) => ( <Breadcrumb path={match.pathname} children={breadcrumb} className="cs_breadcrumb" key={uuidv4()} /> ))} </div> ); };

Pero cuando hago eso, mi declaración Breadcrumb className se anula al invocar Breadcrumb className... Aunque en Breadcrumb.js console.log(classes) devuelve clases concatenadas. Alguien sabe como lograrlo o tiene algún tip?? Estaré agradecido