CODEWITHSUNDEEP
javascriptcssreactjs
Ryukote
Ryukote

Reputation: 794

CSS in ReactJS - media query and grouping selectors

How can I use next 2 CSS examples in React to act exactly as I would do it in plain CSS/HTML, but without using danerouslySetInnerHTML:

@media (max-width: 600px) {
    .main {
        border-radius: 0px;
    }
}

.un:active, .pass:active {
    border: 2px solid rgba(0, 0, 0, 0.18) !important;
}

I did tried to Google those 2 cases but there wasn't anything that covers them.

EDIT: There is much more css behind the scene and I want to transform that css and html to React component. The problem is that I don't know how to transform media query from plain CSS into React. I want for that media query to be applied on entire Component. I know how to transform CSS to React in general, but I have this specific situation (I am still new to React) when there is media query and grouping selectors and I don't know how to transform those in React to be used in that component for only that component.

Upvotes: 2

Views: 237

Answers (1)

AmerllicA
AmerllicA

Reputation: 32737

The danerouslySetInnerHTML is not a proper way to add CSS to a react application, there are many ways to add CSS, for example I use PostCSS preprocessor and for example Less, Sass, SCSS, JSS and many other ways are exist that you can use them, But if you just wanna run a test, make a style tag and put these two CSSes in it and absolutely your browser find it out and show you the results like plain HTML/CSS.

Do like this below code:

<style>
    @media (max-width: 600px) {
       .main {
           border-radius: 0px;
       }
    }

    .un:active, .pass:active {
        border: 2px solid rgba(0, 0, 0, 0.18) !important;
    }
</style>

And put it in your code. Undoubtedly it works.

But with your more explain and editing the question, I understand that you need JSS for your work, for more information visit this link

You can use in inside of your react app with less complexity. you can prepare your CSSes just like you want, as a JavaScript object:

const viewPortSizes = { 
    height: "100vh",
    width: "100vw",
};

And then use it in your JSX tags.

Hope it helps you.

Upvotes: 1

Related Questions