Медиа-запрос с темой Styled-Components

Question

Я сделал следующие коды для упрощения медиазапросов в тематике Styled-Components в приложении React.

theme.js

export const theme = {
  // Color Parette
  color: {
    ...
  },
  // Media Query
  media: {
    device: {
      min: 0,
      sm: 576,
      md: 768,
      lg: 992,
      xl: 1200
    },
    query: (lower, upper) => {
      var queryString;
      if (lower != null && upper != null) {
        queryString = `@media screen and (min-width: ${lower}px) and (max-width: ${upper}px)`;
      } else if (lower != null) {
        queryString = `@media screen and (min-width: ${lower}px)`;
      } else if (upper != null) {
        queryString = `@media screen and (max-width: ${upper}px)`;
      } else {
        queryString = `@media screen and (min-width: 0px)`;
      }
      return queryString;
    }
  }
};

NavMenu.js

//imports
//theme.js is imported to index.js and applied to ThemeProvider component

export default function NavMenu(props) {
  return (
    <div>
      <StyledNavbar>
        ... //contents
      </StyledNavbar>
    </div>
  );
}

//Styled Components
const StyledNavbar = styled(Navbar)`
    ${props => props.theme.media.query(props.theme.media.device.md)} {
      color: ${props => props.theme.color.primary.default};
    }
`;

, но не уверен, что это хороший подход.Мои опасения таковы:

1. Это не кажется таким упрощенным, поскольку мне нужно писать props.theme.media.query(props.theme.media.device.xx) каждый раз, когда я задаю запрос.
2. Тогда я не могу определить что-то вроде const query = props.theme.media.query in NavMenu.js?
3. Или этот подход совершенно неправильный?

Дайте мне знать, если приведенная выше информация не нужна.