Menu
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.
274
To pass props to React components created with styled-components, we can interpolate functions into the string that creates the component. We create the ArrowStyled component with the styled. div tag. Then string that we pass into the tag has the rotate value set from a prop.
The uses for Emotion are very different from those of styled-components. The main feature of this library is that the style composition is predictable for writing different CSS styles using JavaScript. This library supports both string and object styles.
unstable_useOpaqueIdentifier testing reactjs But now, we can use the useId hook to join two elements in React. For example, we can join the label and input tag with the id and for . Every id should be unique on the HTML page.
In SCSS, you can use variables and formulas for expressing colors, font sizes, widths and spacing variants. However, when you switch from SCSS to styled components, the syntax isn't valid anymore. Styled component files are CSS-in-JS, so they are actually JavaScript files.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
