0

我对样式组件相当陌生，我正在尝试让媒体模板在我的反应应用程序中工作。它是使用“ create-react-app ”创建的，我遵循了 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;

尽管如此，我收到以下错误：

第 14 行：'css' 未定义 no-undef

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

第 14 行如下： acc[label] = (...args) => css`

那条线有什么问题？我获得此代码的代码片段的链接在这里

4

1 回答 1

2

很抱歉你遇到了麻烦。您唯一需要更改的css是从styled-components!

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

那将解决它。

我建议您阅读我们的文档，以便您了解该库的功能。这不是很长，但它会让你成功。我们还将更新文档以包含完整的导入！（参考问题）

于 2017-07-01T08:34:01.540 回答