Question

我将布尔属性传递给样式化组件，以根据传递到组件中的属性来更改样式，如下所示：

    <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 attrs？

全按钮组件：

    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;

Answer 1

此文档页面可能会有所帮助：https://www.styled-components.com/docs/basics#passed-props

基本上，如果您使用非大写字母的道具进行样式设置，它将直接传递到DOM节点。我们正在研究better alternatives的这种模式。

Answer 2

我有完全相同的问题，当我将 width 或 height 道具传递到组件中时，它们在html上可见，我认为这两个词（也许其他）实际上是关键字，因为其他道具不会发生这种情况。

示例：

<div class="Container-sc-10mm8fh-0 cyDjRF">
  <div class="Line-sc-10mm8fh-1 oPRx"></div>
  <div height="3rem" class="VSpace-sc-18gziyv-1 kkKpPd"></div>
  <div class="Line-sc-10mm8fh-1 oPRx"></div>
  <div height="0.4rem" class="VSpace-sc-18gziyv-1 kkKpPd"></div>
  <div class="Line-sc-10mm8fh-1 oPRx"></div>
</div>

为什么“样式化组件”道具显示为HTML属性？

2 个答案: