Greetings! I'm currently using Bootstrap with React and I am trying to figure out how to extend my component by passing className props deeper. Within my atom component, I have two separate files. The first one contains the component declaration.
Breadcrumb.js
export const Breadcrumb = (props) => {
const { className } = props;
const classes = getClasses(className);
return (
<Link to={props.path} className={classes} {...props}>
{props.children}
</Link>
);
};
The second file includes getClasses() which returns all the default Bootstrap classes.
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`;
My goal is to be able to extend my Breadcrumb component with additional classes when invoking it by passing className props like this:
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>
);
};
However, I am facing an issue where the declared className in Breadcrumb is being overridden by the invoked className of Breadcrumb... Even though console.log(classes) in Breadcrumb.js returns concatenated classes. Does anyone have any insights on how to accomplish this or any tips? Your help would be greatly appreciated.