将id属性插入由react-emotion创建的样式化组件

Question

使用React组件对普通HTML元素进行样式设置的基本用法react-emotion如下：

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

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

给定的代码将给我们这样的东西：

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

无论如何，我可以id向生成的HTML元素添加装饰物吗？提前致谢。

Answer 1

id使用此组件时只需添加属性。

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>