Как добавлять стили стандартному компоненту, чтобы переопределять его отоборажение

Подскажите как правильно передавать стили компоненте, чтобы они имели специфичность выше базовых.

У меня есть условно кнопка, которая в пропах может получать дополнительный класс.

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>
  );
};

Но в итоге базовые стили имеют выше специфичность и переписывают добавленные.


Ответы (0 шт):