你可以在 CSS 中移动 React 创建的组件吗?右

Question

我提前为这个愚蠢的问题道歉。

我使用创建反应应用程序样板创建了一系列组件。我将它们导入到应用程序中.js它们按预期呈现，但如果我尝试使用应用程序移动页面上的组件.css请给我的组件一个 id 标签。 什么也没发生。

我错过了什么？ 我认为一旦导入组件，您就可以将其视为页面上的另一个 html 元素。

我再次为这个简单的问题道歉，并感谢任何帮助。

根据请求的代码：

我的组件之一;

import React from 'react';
import {Panel, Image} from 'react-bootstrap';
import galaxy from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/galaxy.jpg';
import David from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/David.jpg';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
bootstrapUtils.addStyle(Panel,'main','backgroundImg');
const IntroPanel =()=>(
<div>
  <style type="text/css">
  {`
    .panel-backgroundImg{
        width: 300px;
        height: 150px;
        border: 1px solid gray;
        border-radius: 0px;
        padding-bottom: 0px !importnt;
        padding-top: 0px !importnt;
     }
     #background{
       position: fixed;
     }
     .galaxy-background{
         width: 298px;
         height: 148px;
        }
      #galaxy-pos{
        position: fixed;
        left: 1px;
        top: 73px;
      }
     .DavidProp{
       width: 80px;
       height: 80px;
       border-radius: 50%;
       border: 1px solid gray;
       box-shadow: 0 0 0 3px white, 0 0 0 4px gray;
     }
     #DavidPos{
       position: fixed;
       left: 110px;
       top: 185px;
     }
     .panel-main {
         width: 300px;
         height: 150px;
         border-radius: 0px;
         border: 1px solid gray;
         padding-bottom: 0px !importnt;
         padding-top: 0px !importnt;
         right: 200px;
         }
     #mainPanel{
       position: fixed;
       top: 222px;
       left: 0px;
    }
    .Name{
      font-weight: Bold;
    }
    #NamePos{
      position: fixed;
      top: 275px;
      left: 95.5px;
    }
    .Intro{
    }
    #IntroPos{
      position: fixed;
      top: 300px;
      left: 10.5px;
    }
    .sighting{
      font-style: oblique;
      font-size: 14px;
      font-weight: Bold;
    }
  `}
  </style>
  <div>
    <Panel bsStyle="backgroundImg" id="background">
      <img src={galaxy} className="galaxy-background" id="galaxy-pos" alt="backgroundImg"/>
    </Panel>
    <Panel bsStyle="main" id="mainPanel">
      <p className="Name" id="NamePos">
        David Townsend
      </p>
      <p className="Intro" id="IntroPos">
        "I am a Leaf on the wind, Watch how I soar"
          <p>-Wash, <span className="sighting">Serenity</span></p>
      </p>
    </Panel>
  </div>
    <div>
      <Image src={David} className="DavidProp" id="DavidPos" />
    </div>
  </div>
);
export default IntroPanel;

这是应用程序.js：

import React, { Component } from 'react';
import './App.css';
import MenuBar from './Components/MenuBar.js'
import IntroPanel from './Components/IntroPanel.js'
import AboutPanel from './Components/AboutPanel.js'

class App extends Component {
  render() {
    return (
      <div className="App">
        <div>
          <MenuBar Name="Inside David Townsend's Brain"
            LinkName1="Thoughts" Link1="#"
            LinkName2="About" Link2="#"
            LinkName3="Ideas" Link3="#"
            LinkName4="Resume" Link4="#" />
        </div>
        <div>
          <IntroPanel id="test" />
        </div>
        <div >
          <AboutPanel />
        </div>
      </div>
    );
  }
}
export default App;

这是应用程序.css：

.App {
  text-align: center;
}
.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}
.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}
.App-intro {
  font-size: large;
}
@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
#test{
  position: fixed;
  top: 300px;
  left: 10.5px;
}

Answer 1

我回答了我自己的问题。 答案分为两部分。

1. 我需要将 css position: fixed;更改为 position: relative;

如果我理解正确，css固定位置基本上是网页的世界坐标，css相对位置是父对象的局部坐标。

2. 为了移动 React 组件，我创建了一个<div>，其中包含创建的 React 组件，并使用 CSS 移动了<div>。

我

毫不怀疑可能有一种更优雅的方式，但这就是我解决问题的方式。