一些 styled-components 道具传递给 HTML 标签,其他则没有

Some styled-components props passed to HTML tags, other not

我正在寻找一种模式或一些解释,为什么某些样式化组件道具会在 HTML 中传递和呈现,而其他则不会。简单示例:

const Container = styled.div`
  display: flex;
  flex-direction: ${props => props.direction};
  flex: ${props => props.flex};
`;

然后当我使用它时:

<Container direction="column" flex="2">

我可以在开发者工具中查看的 HTML 输出如下:

<div direction="column" class="sc-Ajrsh">

我知道我可以用 $ 符号命名方向道具,例如 $direction,它解决了问题,但是什么时候添加这个符号,什么时候不添加这个符号的模式是什么?我不知道任何 direction HTML 属性(只有 dir 一个)所以情况可能并非如此。我在 nested prop name 和其他一些人身上发生了同样的事情(对于一些人,我在控制台中收到一些警告,而对于一些人则没有警告......)

根据 styled components docs:

If the styled target is a simple element (e.g. styled.div), styled-components passes through any known HTML attribute to the DOM.

在内部,看起来 styled-components 使用 @emotion/is-prop-valid 包来确定哪些 props 是“已知”的,哪些不是。这里是 the list of props from source code that are considered "known" - you can see that "direction" is included because it is a valid prop for svgs.