Reactjs 反应&；Typescript、样式化组件&；儿童

我尝试了很多不同的组合来实现这一点，但它没有应用我为

StyledLines

组件编写的样式，它们自己就可以很好地工作！将

StyledLines

组件作为子组件使用，它不起作用。

Target

组件样式按预期工作

import React, { Fragment, FunctionComponent } from 'react';
import styled from '@emotion/styled';


interface Crosshair {
  size: number;
  thickness: number;
}


const Target = styled.div<Crosshair>`
  position:absolute;
  &:before {
    content: '';
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    background-color:transparent;
    border-color:#2fd5d5;
    margin-left:-${({size}) => size / 4}px;
    margin-top:-${({thickness}) => thickness / 4}px;
    width:${({size}) => size / 2}px;
    height:${({thickness}) => thickness / 2}px;
  }
`;

const Lines: FunctionComponent = ({children}) => <div className="line">{children}</div>;

const StyledLines = styled(Lines)<Crosshair>`
  position:absolute;
  &:nth-of-type(1) {
    top:0;
    left:0;
  }
  &:nth-of-type(2) {
    top:0;
    right:0;
  }
  &:nth-of-type(3) {
    bottom:0;
    right:0;
  }
  &:nth-of-type(4) {
    bottom:0;
    left:0;
  }
  &:after, &:before {
    content: '';
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    background:#2fd5d5;
    margin-left:-${({size = 2}) => size / 2}px;
    margin-top:-${({thickness = 24}) => thickness / 2}px;
    width:${({size = 2}) => size}px;
    height:${({thickness = 24}) => thickness}px;
  }
  &:before {
    transform: rotateZ(90deg);
  }
`;


export default function Crosshairs() {
  return <Fragment>
    <div>
      {[0,1,2,3].map(i => <StyledLines key={i} size={24} thickness={2}>
        <Target size={24} thickness={2} />
      </StyledLines>)}
    </div>
  </Fragment>;
}

import React，{Fragment，FunctionComponent}来自'React'；
从'@emotion/styled'导入样式；
接口十字线{
大小：数量；
厚度：数量；
}
const Target=styled.div`
位置：绝对位置；
&：之前{
内容：''；
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
背景色：透明；
边框颜色：#2fd5d5；
左边距：-${（{size}）=>size/4}px；
页边顶部：-${（{thickness}）=>thickness/4}px；
宽度：${（{size}）=>size/2}px；
高度：${（{thickness}）=>厚度/2}px；
}
`;
常量行：FunctionComponent=（{children}）=>{children}；
常量StyledLines=已设置样式（行）`
位置：绝对位置；
&：第n种类型（1）{
排名：0；
左：0；
}
&：第n种类型（2）{
排名：0；
右：0；
}
&：第n种类型（3）{
底部：0；
右：0；
}
&：第n种类型（4）{
底部：0；
左：0；
}
&：之后，&：之前{
内容：''；
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
背景#2fd5d5；
左边距：-${（{size=2}）=>size/2}px；
页边顶部：-${（{thickness=24}）=>thickness/2}px；
宽度：${（{size=2}）=>size}px；
高度：${（{thickness=24}）=>thickness}px；
}
&：之前{
变换：旋转（90度）；
}
`;
导出默认函数十字光标（）{
返回
{[0,1,2,3].map（i=>
)}
;
}

行

是一个普通的React组件，而不是样式化组件，因此必须将

类名

道具传递给要设置样式的DOM部分：

const Lines: FunctionComponent = ({children, className}) => <div className={`line ${className}`}>{children}</div>;

const行：FunctionComponent=（{children，className}）=>{children}；