Search code examples
reactjsemotion

Insert id attribute to styled components created by react-emotion

The basic use of styling plain HTML elements with react-emotion as React components is like this:

import React from 'react';
import styled from 'react-emotion';

const StyledContainer = styled.div`
  display: block;
  box-sizing: border-box;
`;

The given code would give us something like this:

<div class="css-gf43fxd ferwf23sd"></div>

Is there anyway I can add an id attibute to that generated HTML element? Thanks in advance.

Solution

  • Just add the id attribute when you are using this component.

    import React from 'react';
import styled from 'react-emotion';

const StyledContainer = styled.div`
  display: block;
  box-sizing: border-box;
`;

// and when you want to use this component add id attribute

<StyledContainer id="some-id">...</StyledContainer>