Question

我已经尝试了许多不同的组合来使其正常工作，但是它并没有应用我为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>;
}

Answer 1

Lines是一个普通的React组件，而不是样式化的组件，因此您必须将className属性传递给要设置样式的DOM部分：

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

React＆Typescript，样式化的组件和子元素

1 个答案: