Semantic-UI-React要素が私の基本的なReactjs Appを破壊する原因は何ですか？

Question

私はReactに初めていて、Semantic-ui-reactを利用しようとしています。私はReactとSemantic UI Reactをインストールするための手順に従っていましたが、Semantic-ui-reactから要素を追加しようとするたびに、開発コンソール/ブラウザで次のエラーが表示されます（詳細なスクリーンショットのリンクと引用）。

要素タイプが無効です：文字列（組み込みコンポーネント用）またはクラス/関数（複合コンポーネント用）が必要ですが、未定義です。コンポーネントを定義したファイルからエクスポートするのを忘れた可能性があります。

Appのレンダリング方法を確認してください。

コンソールのエラーメッセージのページ

スクリーン

Iインポート後セマンティックUI-反応要素のconsole.log一方、エラーメッセージのスクリーンショットそれは未定義を返します。

Semantic-ui-react要素を削除しますが、JSXを保持するとエラーが解決されます。 ReactとSemantic UI Reactを再インストールしようとしましたが、インポート/エクスポートをダブルチェックして構文をダブルチェックしましたが、問題を特定できません。

REPO：https://github.com/LATAEVIA/SS-Artistpage

Package.json

"dependencies": { 
"react": "^16.1.0", 
"react-dom": "^16.1.0", 
"react-scripts": "1.0.17" 
"react-scripts": "1.0.17", 
"semantic-ui-css": "^2.2.12", 
"semantic-ui-react": "^0.76.0" 

Index.htmlと

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link> 

Index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
// import './index.css'; 
import 'semantic-ui-css/semantic.min.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(<App />, document.getElementById('root')); 
registerServiceWorker(); 

App.js

import React, { Component } from 'react'; 
import './App.css'; 
import { Button, Icon, Header, Container } from 'semantic-ui-css/semantic.min.css'; 
console.log(Button); 

class App extends Component { 
    render() { 
    return ([ 
     <Container> 
     <div key={0}> 
      <Header> 
      <img alt="Artist Image" /> 
      <h1>Artist Name</h1> 
      <p> 
       Artist Bio 
      </p> 
      </Header> 
     </div>, 
     <div key={1}> 
      <h2>(Artist Name) Songs That Feel Like:</h2> 
      <form> 
      <input type="checkbox" name="mood_tags" value="Calm" /> Calm<br/> 
      <input type="checkbox" name="mood_tags" value="Mellow" /> Mellow<br/> 
      <input type="submit" value="Submit" /> 
      <Button size='small' color='green'> 
       <Icon name='download' /> 
       Download 
      </Button> 
      </form> 
     </div> 
     </Container> 
    ]); 
    } 
} 

export default App; 

Answer 1

置き換えます

import { Button, Icon, Header, Container } from 'semantic-ui-css/semantic.min.css'; 

をすることにより：確かに

import { Button, Icon, Header, Container } from 'semantic-ui-react'; 
import 'semantic-ui-css/semantic.min.css'; 

、コンポーネントは、CSSファイルからインポートすることはできません。