React 和 Typescript，样式化的组件和子组件

Posted 2023-03-16

【中文标题】React 和 Typescript，样式化的组件和子组件

【英文标题】：React & Typescript, styled components & children

【发布时间】：2020-06-03 07:33:42

【问题描述】：

我已经尝试了很多不同的组合来让它工作，但它没有应用我为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 / 4px;
    margin-top:-$(thickness) => thickness / 4px;
    width:$(size) => size / 2px;
    height:$(thickness) => thickness / 2px;
  
`;

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 / 2px;
    margin-top:-$(thickness = 24) => thickness / 2px;
    width:$(size = 2) => sizepx;
    height:$(thickness = 24) => thicknesspx;
  
  &: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>;

【参考方案1】：

Lines 是一个普通的 React 组件，而不是一个样式化的组件，所以你必须将 className 属性传递给你想要样式化的 DOM 部分：

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