How do I add a Media Query to a React CSS object?

Question

Currently I have this:

const ButtonStyles = {
    color: 'red',
}

But I want to add a Media Query for mobile, would it look something like this?:

const ButtonStyles = {
    color: 'red',
    '@media (max-width: 900px)': {
        color: 'blue',
    }
}

If the syntax is not in this format, then how is it supposed to be done?

Have you tried the options suggested here: https://stackoverflow.com/questions/54491645/media-query-syntax-for-reactjs — j-petty, Jun 29 '21 at 02:01

Anubz · Answer 1 · 2023-01-03T03:32:39.227

Give a try.

https://github.com/kasinskas/react-native-media-query Work just like RN StyleSheet, but with queries.

https://github.com/yocontra/react-responsive Work with functions inside regular RN StyleSheet

An eg. with natives StyleSheet, Platform and React-Responsive and variables.

import { StyleSheet, Platform } from 'react-native';
import { useMediaQuery } from 'react-responsive';

export const STYLES = StyleSheet.create({

  content: (setup) => {
    const justifyTo = setup?.justify ? setup.justify : 'flex-start';

    return {
      justifyContent: justifyTo,
      ...Platform.select({
        web: {
          width: useMediaQuery({ maxWidth: 767 }) ? '100vw' : '70vw',

          maxWidth: 1280,
          marginHorizontal: 'auto',
          marginVertical: 'auto',
        },
      }),
    };
  }

});

score 0 · Accepted Answer · answered Jun 29 '21 at 18:04

0

According to this discussion You cannot use Media queries with react css objects. You must use stylesheets with class names or other external modules like styled components.

answered Jun 29 '21 at 18:04

Embedded_Mugs

2,132
3
21
33

How do I add a Media Query to a React CSS object?

2 Answers2