Insert id attribute to styled components created by react-emotion

reactjs emotion
sdabrutas picture sdabrutas · Oct 18, 2018 · Viewed 8.4k times · Source

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.

Answer

Gabriele Petrioli picture Gabriele Petrioli · Oct 18, 2018

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>

Related questions

Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More
"SyntaxError: Unexpected token < in JSON at position 0"

In a React app component which handles Facebook-like content feeds, I am running into an error: Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0 I ran into a similar error which turned out to be a …

Read More