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'未定义为no-undef

第16行：'css'未定义为no-undef

第14行如下：acc [label] =（... args）=＆gt; css`

这条线有什么问题？我获得此代码的代码段的链接是here

Answer 1

对不起，你遇到了麻烦。您唯一需要更改的是从styled-components导入the css helper！

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

这将解决它。

我建议您阅读our documentation，以便了解图书馆的功能。这不是很长，但它会帮助你取得成功。我们还将更新文档以包含完整导入！（reference issue）

无法使用样式化组件获取媒体模板

1 个答案: