Блог

у меня есть повторно используемый компонент addButton, который использует компонент IconButton. addButton, когда имеет значение active prop true и значение marginLeft prop, тогда следует применять левое поле 14 пикселей, если не 8 пикселей.

addButton используется в компонентах Child1 и Child2. Компонент Child1 передает prop левого края компоненту addButton.

ниже приведен мой код,

 function Child1() {
    return (
        <AddButton marginLeft={14}/> //here marginLeft prop passed
    );
}

 function Child2() {
    return (
        <AddButton /> 
    );
}

interface AddButtonProps {
    marginLeft?: number;
}

export const AddButton = ({marginLeft}: AddButtonProps) => {
    const [saving, setSaving] = React.useState(false);
    const {isDrawing} = useDrawing(item);

    return (
        <PrimaryButton active={isDrawing} marginLeft={marginLeft}/>
    );
};

interface PrimaryButtonProps {
    active?: boolean;
    marginLeft?: number;
}

const PrimaryButton = (props: PrimaryButtonProps) => {
    return <PrimaryIconButtonElement {...props} size={16} variant="primary" />;
};

const PrimaryIconButtonElement = styled(IconButton)<{
    $marginLeft?: number;
    $active?: boolean;
}>`
    width: 32px;
    height: 32px;
    margin-left: ${props =>
        props.$active amp;amp; props.$marginLeft ? props.$marginLeft   'px' : '8px'}; //this doesn't work
`;


function IconButton({active,size,...rest}: Props) {
    return (
        <Wrapper $active={active}>
            <Icon size={size}/>
        </Wrapper>
    );
}
  

теперь, когда активный параметр имеет значение true и левое поле передается для компонента addButton, я хочу, чтобы у PrimaryButtonElement было левое поле 14 пикселей.

но по какой-то причине этот стиль не применяется в приведенном выше коде.

Кто-нибудь может помочь мне исправить это. Спасибо.

Согласно документации по стилизованному компоненту:

Метод styled отлично работает со всеми вашими собственными или любыми сторонними компонентами, если они присоединяют переданный параметр className к элементу DOM.

https://styled-components.com/docs/basics#styling-any-component

Итак, в вашем случае вам нужно:

Добавьте в свой интерфейс Props поле className:

 interface Props {
  active?: boolean;
  size?: number;
  className?: string;
}
  

И на вашей кнопке IconButton укажите className:

 function IconButton({active, size, className, ...rest}: Props) {
    return (
        <Wrapper className={className} active={active}>
            <Icon size={size}/>
        </Wrapper>
    );
}
  

Вам также необходимо удалить префикс $ вашего реквизита в PrimaryIconButtonElement:

 const PrimaryIconButtonElement = styled(IconButton)<{
  marginLeft?: number;
  active?: boolean;
}>`
  width: 32px;
  height: 32px;
  margin-left: ${(props) =>
    props.active amp;amp; props.marginLeft
      ? props.marginLeft   "px"
      : "8px"};
`;
  

Я провел тест, заменив вашу оболочку и теги значков для div, и все сработало хорошо.

* Если ваша оболочка является компонентом react, вам также нужно будет отправить className ему.