menu
up-caret
down-caret

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

# General

General chat

Trending conversations
Generating 200+ class names...
@tbhesswebber · 31d
How do you lint styled-components?
@boris-da-web-dev · 37d
Why is "as" breaking my styles?
@donifer · 23h
Best practice for reusing colours and fonts
@elie · 18h
Confused by the attrs method
@davidohlin · 3d

Making a Media Template Module: SOLVED

styled-components/General · February 20, 2019 at 5:25pm

Making a Media Template Module: SOLVED

February 20, 2019 at 5:25pm (Edited 1 month ago)

I want this as my Media Template Module:

const sizes = {
desktop: 992,
tablet: 768,
phone: 576
};
// 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;
}, {});
export default media;

However, I get this error:

Uncaught ReferenceError: css is not defined at Object.acc.(:3000/anonymous function) [as desktop] (http://localhost:3000/main.js:1117:5) at Module.<anonymous> (App.js:25) at Module.../../../src/App.js (App.js:35) at __webpack_require__ (bootstrap:723) at fn (bootstrap:100) at Module.<anonymous> (Post.js:5) at Module.../../../src/index.js (index.js:28) at __webpack_require__ (bootstrap:723) at fn (bootstrap:100) at Object.0 (index.js:7) at __webpack_require__ (bootstrap:723) at bootstrap:790 at bootstrap:790

Do I need to import something to get this to work?

I'm going off of this: https://www.styled-components.com/docs/advanced#media-templates

I'm breaking these things up so I dont have a lot of code in my components. If there is a better way, please let me know.

SOLUTION:*

import { css } from 'styled-components`

added top top of my module

No messages yet