search

lstrrs / ember-styled-components

Visual primitives for the component age. A simple port for Ember of styled-components 💅
MIT License
12 stars 0 forks source link

Passing an object as an attr to use as a theme results in TypeError #2

Open jwlawrence opened 6 years ago

jwlawrence commented 6 years ago

I'm attempting to pass a "theme" prop to my styled-component and use it to dynamically set styles. This works fine if the attr is a string:

${props => props.color && css`color: ${props.color}`}; {{my-header color="blue"}}

However, if I pass a "theme" attribute with an object as it's value, I get a TypeError of Uncaught TypeError: Cannot read property 'color' of undefined:

${props => props.theme.color && css`color: ${props.theme.color}`}; {{my-header theme=(to-object color=blue)}} // to-object is a helper that generates an object

Looks like this has something to do with the flatten util and I suspect it's not recursively flattening objects:


    at fui-header.js:96
    at flatten.js:37
    at Array.reduce (<anonymous>)
    at flatten (flatten.js:30)
    at ComponentStyle.generateAndInjectStyles (ComponentStyle.js:55)
    at CustomHeader.generateAndInjectStyles (StyledComponent.js:65)
    at CustomHeader.generateClassName (StyledComponent.js:61)
    at CustomHeader.didReceiveAttrs (StyledComponent.js:55)
    at CustomHeader.trigger (core_view.js:62)
    at CustomHeader.superWrapper [as trigger] (ember-utils.js:418)```