Having issues integrating with Rebass

[loganpowell]

I'm having an issue trying to integrate this into an app using the Rebass library. I thought I was off to a good start thanks to this comment, but I'm still not getting the two libraries to work together...

Here's my code, which doesn't hide the text when the width is within the query threshold:

import React from 'react';
import { NavLink, Text } from 'rebass'
import styled from 'styled-components'
import {ContainerQuery} from 'react-container-query';
import classnames from 'classnames';
import Icon from '../icon'

const query = {
  'small': {
    minWidth: 200,
    maxWidth: 599
  }
};

const ResponsiveText = styled(Text)`
  .small {
    display: none;
  }
`

const NavItem = ({className, children, icon, ml}) => {
  return(
    <NavLink ml={ml}>
      <Icon name={icon}/>
      <ContainerQuery query={query}>
        {(params) => (
          <ResponsiveText children={children} className={classnames(params, `${className}`)} />
        )}
      </ContainerQuery>
    </NavLink>
  )
}

export default NavItem

I also found this from mxstbr: mui/material-ui#6115 (comment)

Any pointers?

[d6u]

Interesting, I have used no Rebass and very little styled-component. But before I can find some time to try this out myself, it seems a little odd to do:

const ResponsiveText = styled(Text)`
  .small {
    display: none;
  }
`

Instead of

const ResponsiveText = styled(Text)`
  display: none;
`

Maybe you mean?

const ResponsiveText = styled(Text)`
  &.small {
    display: none;
  }
`

[loganpowell]

I'm an idiot, I was setting the breakpoint for the entire header rather than the individual component... old habits die hard! Sorry for bothering you! Thank you for the great work and your patience.

[d6u]

👏😄