Не в состоянии установить относительную позицию Div

Question

Я делаю проект аналоговых часов в React, Typescript и SCSS. Моя цель - написать как можно больше CSS в файле SCSS и минимально встроить 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;