cssreactjsmedia-queriesreact-css-modules

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

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?

Solution

  • 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.