Rebass: Styled-components theme not working

[focux]

For some reason, my rebass components are not detecting the theme I'm providing it. The weirdest thing is that through styled-components, the theme works well.

Main Theme:

const fontSizes: any = [
  "12px",
  "13px",
  "14px",
  "16px",
  "18px",
  "20px",
  "24px",
  "32px"
];

fontSizes.tiny = fontSizes[0];
fontSizes.small = fontSizes[1];
fontSizes.body = fontSizes[2];
fontSizes.body2 = fontSizes[3];
fontSizes.big = fontSizes[5];
fontSizes.display = fontSizes[6];

const space: any = [
  0,
  '5px',
  '10px',
  '15px',
  '20px',
  '25px',
  '30px',
  '35px',
  '40px',
  '45px',
  '65px',
  '80px'
];

space.tiny = space[1];
space.small = space[3];
space.medium = space[4];
space.big = space[6];
space.huge = space[8];

export default {
  fontSizes,
  space,
  colors: {
    text: '',
    background: 'white',
    primary: 'red',
    gray: '#dfdfdf',
  },
  breakpoints: ["38em", "62em", "68em", "110em"],
};

SideBar

import styled, { ThemeProvider } from 'styled-components';
import MenuItem from './MenuItem';
import { Box } from 'rebass';
import main from '../../../themes/main';

const SidebarContainer = styled.div`
  background-color: ${props => props.theme.colors.background};
  grid-row: sidebar-start / sidebar-end;
  grid-column: sidebar-start / sidebar-end;
  /* padding: ${props => props.theme.space.small}; */
`;

const SideBar: React.FC = () => {
  return (
    <SidebarContainer>
      <ThemeProvider theme={main}>
        <Box px="2" backgroundColor="primary">
          <MenuItem>My Questions</MenuItem>
        </Box>
      </ThemeProvider>
    </SidebarContainer>
  );
};

export default SideBar;

[jxnblk]

If you're using the latest Rebass, you'll need to import from rebass/styled-components if you're using the styled-components library

[focux]

@jxnblk Uh oh, didn't know about it. I'll try that, thank you. By the way, is there any place where I can read the motivations that led you to change styled-components for emotion in the main package?

Edit:
Worked!

[jxnblk]

Great! The motivation is fairly similar to the motivation in Theme UI here: https://theme-ui.com/motivation/ but Emotion has an API to clean up props from the HTML output, which Styled Components does not have

[focux]

Thank you! I'll check that out.

[robbertvancaem]

For anybody coming here and:

• using Styled Components
• using the standalone reflexbox package to import their Box and Flex components
• noticing their breakpoints as defined in their theme.js aren't working

It's quite simple, as described here: https://rebassjs.org/reflexbox/

Change your import from
import { Box, Flex } from 'reflexbox';

into
import { Box, Flex } from 'reflexbox/styled-components;

Took me a little while to find this, hence this comment. Hope it helps 👍 🎉