スタイリッシュなコンポーネントを使用してメディアテンプレートを使用できない

Question

私はスタイリッシュなコンポーネントをかなり使い慣れていて、私はリアクションアプリでメディアテンプレートを取得しようとしています。それは私がスタイルを作られ、コンポーネントのマニュアルに掲載のコードに続く 「create-react-app」を使用して作成されました。それにもかかわらず

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import styled from 'styled-components'; 

const sizes = { 
    desktop: 992, 
    tablet: 768, 
    phone: 376 
} 

// Iterate through the sizes and create a media template 
const media = Object.keys(sizes).reduce((acc, label) => { 
    acc[label] = (...args) => css` 
     @media (max-width: ${sizes[label]/16}em) { 
      ${css(...args)} 
     } 
    ` 

    return acc 
}, {}) 

const Content = styled.div` 
    height: 3em; 
    width: 3em; 
    background: papayawhip; 

/* Now we have our methods on media and can use them instead of raw 
queries */ 
    ${media.desktop`background: dodgerblue;`} 
    ${media.tablet`background: mediumseagreen;`} 
    ${media.phone`background: palevioletred;`} 
`; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      header goes here!!! 
     </div> 
     <Content/> 
     </div> 
    ); 
    } 
} 

export default App; 

を、私は次のエラーを取得：

14行目：「CSS」は-はundefを定義されていないされていませんが

ライン16： 'CSS' に定義されていない無undefを

線14は、以下である：ACC [ラベル] =（...引数）=>

css`

その行に何が問題なのですか？ このコードを取得したコードへのリンクはhere

Answer 1

ご迷惑をおかけして申し訳ありません。変更する必要があるのはstyled-componentsからthe css helperをインポートすることだけです！

import styled, { css } from 'styled-components'; 

これで解決します。

our documentationを読むことをお勧めします。ライブラリの機能を理解しておいてください。それほど長くはないが、それは成功のためにあなたを設定するだろう。また、完全なインポートを含むようにドキュメントを更新します！ （reference issue）