无法设置Div的相对位置

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

您必须向const express = require("express"); const router = express.Router(); const User = require("../models/user"); router.route("/item/add") .post(function(req, res) { User.findById(req.user._id, function(user, err) { if (err) { console.log(err); } var item = new Item(); item.name = req.body.name; item.description = req.body.description; item.price = req.body.price; item.createdBy = { id: req.user._id, username: req.user.username }; item.save(function(err) { if (err) { res.send(err); } res.json({ message: "Item was successfully saved" }); console.log(item); }); }); }); ，width，height和top添加单位。我认为您尝试使用像素，然后添加left：

px

此外，top: 100px; 中没有引号：

'relative'