10

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.

sdabrutas
  • 1,477
  • 2
  • 14
  • 28

1 Answers1

19

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>
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317