我知道，我们可以扩展或添加样式到现有的组件与类似风格的组件Link的组件react-router-dom。所述特征在此处指示。但是，我的问题是，如何组合两个或多个现有组件然后添加更多样式？
就我而言，我有一个可重用的组件用于文本元素，例如span,p以及a标准字体大小、字体粗细等。同时，我想使用 react-router-dom 的 Link 组件。目前，我有这样的事情：
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { TextElement } from '../common';
/*
Can I do something like this?
const MyLink = styled(Link, TextElement)`
margin: 10px 0;
`;
or this?
const MyLink = styled([Link, TextElement])`
margin: 10px 0;
`;
*/
const MyPage = props => (
<>
<MyLink to="/next-page" />
</>
);
任何建议将不胜感激。
我的TextElement组件是这样的：
const …考虑到对话框、模式、工具提示等组件的堆叠索引应高于 HTML 页面中任何其他元素的堆叠索引，我将这些组件放置在root放置所有其他元素的元素的直接同级元素中。React 开发人员很快就会认识到这一点，他们会知道我正在尝试使用React Portals。您可以在这里将其可视化：
<body>
<div id="root">
// ----- other elements -----
<div id="supposed-parent" />
// ----- other elements -----
</div>
<div id="dialog-container">
<div id="supposed-child" />
</div>
</body>
那么，我该如何定位#supposed-child在旁边或旁边#supposed-parent呢？任何帮助，将不胜感激。
使用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元素添加装饰物吗？提前致谢。