Javascript 无法使用样式化组件使媒体模板正常工作

我对样式化组件相当陌生，我正在尝试让媒体模板在我的react应用程序中工作。它是使用“”创建的 我遵循了styled components文档中发布的代码：

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;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“样式化组件”导入样式化；
常数大小={
桌面：992，
片剂：768，
电话：376
}
//迭代大小并创建媒体模板
常量媒体=对象。键（大小）。减少（（acc，标签）=>{
acc[标签]=（…参数）=>css`
@介质（最大宽度：${size[label]/16}em）{
${css（…args）}
}
`
返回acc
}, {})
const Content=styled.div`
高度：3em；
宽度：3em；
背景：番木瓜；
/*现在我们在媒体上有了我们的方法，可以使用它们而不是原始的
询问*/
${media.desktop`background:dodgerblue；`}
${media.tablet`背景：mediumseagreen；`}
${media.phone`背景：Palevoletred；`}
`;
类应用程序扩展组件{
render（）{
返回(
标题在这里！！！
);
}
}
导出默认应用程序；

尽管如此，我还是得到了以下错误：

第14行：“css”未定义无未定义

第16行：“css”未定义无未定义

第14行如下：acc[label]=（…args）=>css`

那条线怎么了？

---

指向我获取此代码的代码段的链接是

很抱歉，您遇到了麻烦。您唯一需要更改的是从

样式化组件导入

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

那会解决的

我建议你阅读，这样你就能了解图书馆的特点。虽然时间不长，但它会让你成功的。我们还将更新文档以包含完整导入！很抱歉你遇到麻烦了。您唯一需要更改的是从
样式化组件导入

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

那会解决的

我建议你阅读，这样你就能了解图书馆的特点。虽然时间不长，但它会让你成功的。我们还将更新文档以包含完整导入！（）
非常感谢。我已经添加了css作为导入，但是由于一个无关的JavaScript错误，我无法使它工作。话虽如此，样式化的组件是文档化的，有效的，使组件化真正有效。太棒了。谢谢你的好话，很高兴你喜欢它！非常感谢你。我已经添加了css作为导入，但是由于一个无关的JavaScript错误，我无法使它工作。话虽如此，样式化的组件是文档化的，有效的，使组件化真正有效。太棒了。谢谢你的好话，很高兴你喜欢它！