search

rebassjs / grid

This package has moved and renamed
https://rebassjs.org/reflexbox
MIT License
2.04k stars 96 forks source link

css prop returning undefined properties #161

Closed mrseanbaines closed 5 years ago

mrseanbaines commented 6 years ago

I am running @rebass/grid v6.0.0-5 (and have tried other v6.0.0-* versions) and am getting some strange results when using the css prop on both Flex and Box component.

Here is some basic example markup that I've tried:

<Flex justifyContent='center'>
  <Box css={{ height: '100%' }}>
    Some content here...
  </Box>
</Flex>

...and I am getting this in my Chrome dev tools:

image

Am I doing something wrong?

jxnblk commented 5 years ago

Do you have a theme that you're using along with this? If so, could you include the code for that?

mrseanbaines commented 5 years ago

I have a theme being passed down via Styled Components' ThemeProvider:

export default {
  fonts: {
    sansSerif:
    '"Barlow", sans-serif',
  },
  colors: {
    main: '#A29BFE',
    mainHover: '#B4AFFF',
    mainSelectedHover: '#ECEBFF',
    white: '#fff',
    black: '#000',
    greys: ['#d7dce0', '#535c68'],
  },
  radii: ['0px', '2px', '4px', '16px', '9999em', '100%'],
};
marcogigliarano commented 5 years ago

@mrseanbaines I had the same issue and I resolved it changing the prop css with style.

Hope it helps!

jxnblk commented 5 years ago

Potentially related: https://github.com/styled-components/babel-plugin-styled-components/issues/186

jxnblk commented 5 years ago

This package has moved to https://github.com/rebassjs/rebass/tree/master/packages/reflexbox – if you're still seeing this issue, please open a new issue on that repo