css - 无法设置Divs的相对位置

Question

我正在用 React、Typescript 和 SCSS 做一个模拟时钟元素。我的目标是在 SCSS 文件中编写尽可能多的 CSS，并尽可能少地内联 CSS。 (或根本没有)。

我写了这个SCSS文件

.dial-style {
  position: 'relative';
  top: 0;
  left: 0;
  width: 200;
  height: 200;
  border-radius: 100%;
  border-style: solid;
  border-color: #000;
}

.second-hand-style {
  position: 'relative';
  top: 50%;
  left: 50%;
  border: 1px solid red;
  width: 40%;
  height: 1;
  transform-origin: 0% 0%;
  background-color: #ff0000;
}

.minute-hand-style {
  position: 'relative';
  top: 100;
  left: 100;
  border: 1px solid grey;
  width: 40%;
  height: 3;
  transform-origin: 0% 0%;
  background-color: grey;  
}

.hour-hand-style {
  position: 'relative';
  top: 100;
  left: 100;
  border: 1px solid grey;
  width: 20%;
  height: 7;
  transform-origin: 0% 0%;
  background-color: #808080;
}

我的 Typescript React 组件看起来像

import * as React from 'react'
import '../styles/style'

export class AnalogClock extends React.Component<AnalogClockProps, AnalogClockState> {
  constructor(props: AnalogClockProps) {
    super(props)
  }
  render() {
    let secondsTransform = {
      transform: 'rotate(' + ((this.props.currentTime.getSeconds() * 6) - 90).toString() + 'deg)'
    }
    let minuteAngle = (this.props.currentTime.getMinutes() * 6) + (this.props.currentTime.getSeconds() / 60)
    let minutesTransform = {
      transform: 'rotate(' + (minuteAngle - 90).toString() + 'deg)'
    }
    let hoursAngle = (this.props.currentTime.getHours() * 30) + (this.props.currentTime.getMinutes() / 2)
    let hoursTransform = {
      transform: 'rotate(' + (hoursAngle - 90).toString() + 'deg)'
    }    
    return (
      <div className="dial-style">
        <div className="second-hand-style" style={secondsTransform} />
        <div className="minute-hand-style" style={minutesTransform} />
        <div className="hour-hand-style" style={hoursTransform} />
      </div>
    )
  }
}

interface AnalogClockState {}
interface AnalogClockProps {
  currentTime: Date
}

我的时钟看起来像

无论我为顶部、左侧、宽度、高度设置什么。时钟指针的位置根本没有改变。它只是固定在屏幕顶部。我做错了什么？

Answer 1

您必须向 width、height、top 和 left 添加单位。我估计你正在尝试使用像素，然后添加 px:

top: 100px;

此外，'relative' 中没有引号:

position: relative;