In the last article we explored how we can deal with pseudo-selectors using inline styles and Radium
.
Article No Longer Available
Today we're going to see how to make your design responsive using media-queries
and Radium
. Consider the code below:
We have two super simple functional components, App
, which is the main one and DisplaySquare
, which displays a red square. Now let's look at the CSS
of the div
:
const divStyle = {
height: "400px",
width: "400px",
backgroundColor: "red",
margin: "auto",
"@media (max-width: 600px)": {
height: "200px",
width: "200px",
backgroundColor: "green",
margin: "auto"
}
};
We stored our styling into a variable that will be passed as a value to the style
property of the div
. The CSS
looks quite normal, except maybe for this part:
"@media (max-width: 600px)": {
height: "200px",
width: "200px",
backgroundColor: "green",
margin: "auto"
}
The code says that when the view-port is smaller than 601px, the div
should be smaller and green. And this is how we work with media-queries
in Radium
. The complete code is here and I recommend you playing around with it.
Besides importing Radium
we also need to import the {StyleRoot}
HOC (higher order component) because our App
component needs to be wrapped in it (media queries won't work if we don't do this). Also, as mentioned in the last article, don't forget to wrap all the components that use radium
styling in the Radium
HOC, when exporting them.
Radium
is now under stable maintenance so this means no new features will be implemented and even the creators are recommending using alternative tools for achieving the same effects.
You can read more about the project here.
Image source: Zan/ @zanilic on Unsplash
Top comments (0)