一些 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 和其他一些人身上发生了同样的事情(对于一些人,我在控制台中收到一些警告,而对于一些人则没有警告......)
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.
我正在寻找一种模式或一些解释,为什么某些样式化组件道具会在 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 和其他一些人身上发生了同样的事情(对于一些人,我在控制台中收到一些警告,而对于一些人则没有警告......)
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.