在线示例（多维数据集的CSS）内做出反应

Question

我试图重现一个网页，我使用的反应使得这里面立方体（我是很新的反应，所以这个问题可能是愚蠢的）

https://codepen.io/jordizle/pen/haIdo/

因此，我创建了一个组件，其中包含多维数据集的HTML结构。

class Cube extends Component { 
    render() { 
    return (
     <div className="cube"> 
     <div id="wrapper"> 
    <div class="viewport"> 
    <div class="cube"> 
     <div class="side"> 
     <div class="cube-image">1</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image">2</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image">3</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image">4</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image">5</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image active">6</div> 
     </div> 
    </div> 
    </div> 
</div> 
     </div> 
    ); 
    } 
} 

然后，我只是添加了来自上述网站的CSS到一个单独的文件，这是我进口的，就像这样：

import './ProductPage.css'; 

（见上面的链接对CSS的CSS只是复制粘贴）。

最后，我创建了另一个组件，它应该呈现立方体，当它本身被渲染：

class NewProductPage extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     img: null, 
    }; 
    this.onDrop = this.onDrop.bind(this); 
    } 
    onDrop(acceptedFiles){ 
    this.setState({ 
     img: acceptedFiles[0].preview, 
    }) 
    } 
    render(){ 
    return (
     <div> 
     <Cube /> 
     <div className="DropPicBox"> 
      <DropZone onDrop={this.onDrop}> 
      {this.state.img ? 
       <div> 
       <img className="PicBox" src={this.state.img} /> 
       </div> 
       : null} 
      </DropZone> 
     </div> 
     </div> 
    ); 
    } 
} 

这是渲染，但不正确：

我的问题是：有什么关于反应应用CSS的方式会改变立方体的外观？我用jfiddle使用HTML和CSS从本网站此相同的立方体模型：https://codepen.io/jordizle/pen/haIdo/

这个立方体正确地看着：

https://jsfiddle.net/jfj3muug/#&togetherjs=q2dv8HIMza

Answer 1

在JSX，可以指定元素的类，你必须使用className，而不是class。例如： -

<div className="foo">...</div> 

，而不是

<div class="foo">...</div> 

你做的是，在一些地方，但Cube（你的第一个码块）已在几个地方class。