Как добавлять стили стандартному компоненту, чтобы переопределять его отоборажение
Подскажите как правильно передавать стили компоненте, чтобы они имели специфичность выше базовых.
У меня есть условно кнопка, которая в пропах может получать дополнительный класс.
export interface IIconButtonProps extends IButtonProps {
className?: string;
iconType: IconType;
isDisabled?: boolean;
onClick?: (event: React.MouseEvent) => void;
}
export const IconButton: React.FC<IIconButtonProps> = ({
className,
iconType,
isDisabled,
onClick,
...rest
}) => {
return (
<Button
className={classNames("IconButton", className)}
isDisabled={isDisabled}
onClick={onClick}
{...rest}
>
<Icon type={iconType} />
</Button>
);
};
И я хочу, чтобы ее можно было использовать "как есть", но при необходимости в другом месте приложения изменять его визуал.
export const HeaderLogo: FC<IHeaderLogoProps> = ({}) => {
return (
<div className={classNames("HeaderLogo")}>
<IconButton iconType={"SiteLogo"} className="HeaderLogoIconButton" />
</div>
);
};
Но в итоге базовые стили имеют выше специфичность и переписывают добавленные.