Почему реквизиты Styled Component отображаются в виде атрибутов HTML? - PullRequest
Новая
       38

Почему реквизиты Styled Component отображаются в виде атрибутов HTML?

0 голосов
/ 06 сентября 2018

Я передаю логические реквизиты в Styled Components для изменения стиля на основе реквизитов, которые передаются в Компонент, например: 

    <Button href="#contact" small elevate={false} display="primary">
      CONTACT
    </Button>

Вывод этого JSX - недопустимый HTML, который выглядит следующим образом: 

    <a href="#contact" class="Button__ButtonWrapper-fvVzGy gOcROU" display="primary" fluid="0" elevate="0" small="1">
      CONTACT
    </a>

Есть идеи, как сделать так, чтобы реквизиты не отображались в виде HTML-атрибутов?

Полный компонент кнопки: 

    const ButtonWrapper = styled.button`

    padding: ${props =>
    props.small
      ? `${rem(6)} ${props.theme.sizes.sm}`
      : `${rem(12)} ${props.theme.sizes.med}`};

    box-shadow: ${props =>
      props.elevate
        ? `0 10px 15px 0 rgba(0,0,0,0.10)`
        : `0 2px 8px 0 rgba(0,0,0,0.10)`};
    color: ${props => {
      if (props.display === 'primary') return  props.theme.buttons.primary.color;
      if (props.display === 'secondary')
      return props.theme.buttons.secondary.color;
    }};

    `;


    const Button = ({
     display,
     fluid,
     children,
     cta,
     elevate,
     small,
     ...other
    }) => {

    <ButtonWrapper
      display={display}
      fluid={fluid ? 1 : 0}
      elevate={elevate ? 1 : 0}
      small={small ? 1 : 0}
      {...other}
     >
      {children}
      {cta && (
        <div className="icon" dangerouslySetInnerHTML={{ __html: CtaIcon   }} />
      )}
    </ButtonWrapper>
    };


    export default Button;

1 Ответ

0 голосов
/ 10 октября 2018

Эта страница документации может быть полезна: https://www.styled -components.com / docs / basics # прошло-props

В основном, если вы используете не-верблюжий реквизит для стайлинга, он будет передан на узел DOM. Мы ищем лучших альтернатив этому шаблону.

...