CODEWITHSUNDEEP
reactjsstyled-components
marcus-linmarkson
marcus-linmarkson

Reputation: 363

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

I am looking for a pattern or some explanation why some styled-components props are passed and rendered in the HTML and other not. Simple example:

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

Then when I use it like:

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

The output of HTML that I can check in developer tools is like:

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

I know that I can name the direction prop with $ symbol like $direction and it solves the issue, but what is the pattern of when to add this symbol and when not to? I don't know any direction HTML attributes (only the dir one) so probably this is not the case. The same happened to me with nested prop name and some others (and for some I am getting some warning in console, while for some no warning...)

Upvotes: 0

Views: 1467

Answers (1)

Andrew Stegmaier
Andrew Stegmaier

Reputation: 3777

According to the 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.

Internally, it looks like styled-components uses the @emotion/is-prop-valid package to figure out what props are "known" and not. Here is 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.

Upvotes: 1

Related Questions