In the last lecture we added radium and started using it to change our button and add a pseudo selector,
the hover pseudo selector.
Now that's of course nice but we can also use radium to use media queries.
Now I'll do this in a person component, there we have a person class and we could of course easily add a media
query here where we say if the min-width is let's say 500px, then we overwrite our person class to
have a width of 450px and no longer use percentages.
We could absolutely do that
but I will comment this solution out because I don't want to use my css class,
I want to show you how to do it with radium which you might need in some occasions
if you want to scope it to a component or if you want to change it dynamically.
So for that, I'll add a new style and of course you can name this constant whatever you want
in my function here and there, I now again will use a special selector which will look really strange
but which works thanks to radium
and don't forget to wrap your export with radium down there, otherwise it won't work
and now you can write your media query here.
@media (min-width: 500px) and then define the styles as a javascript object.
This still is a javascript property name and
I know this looks super weird
but since it's a string, it's a valid name and radium will parse it
and of course understand it because it's a media query and among pseudo selectors, it is something
radium understands.
Now here we could say that we want to set the width of the element to which we apply the style to 450
px, so fixed width which is not growing dynamically.
And now I want to assign this to my component here, I want to assign the style and I do have my class added
but I also have my style which will overwrite my class setting, by default css rules not because of
radium.
And now we should see the following if I reload the application or toggle the persons,
now as you can see we now get an error that plugin requiring addCSS for example when using keyframes
or for us important media queries,
we need to wrap our application in a style root component.
This is a component made available by Radium and whilst wrapping the export with radium is enough
for its pseudo selectors, for basically transforming selectors like media queries or other animations
with keyframes,
we need to wrap the entire application in a special component provided by Radium.
There, we can simply import style root from radium with this first radium import here, we're importing
the default export of that file and then we import a named export style root
and now we can simply wrap our whole application with that.
So what we can do is we can simply go here, oops not in person, sorry, the return statement and simply wrap
everything, the whole div with the class name app into style root like this.
Now if we save this and we reload the application, I clicked this again,
now it works without an error,
and if I resize this you see the boxes are only staying in the middle but they're not growing in width
anymore,
they are growing to 60 percent of the size though
if I go below my media query threshold which was 500px.
So there if I go below that threshold, it will basically stick to 60 percent, if I go
above it,
it will stay at the fixed width of 450px. Important,
wrap your entire application in the root component only there with the style root component provided
by radium, so that you can safely access advanced features to call it like this, like media queries. For
pseudo selector alone, you don't need to do that whichever feature you use,
you have to wrap a component where you plan on using radium features like media queries, like pseudo
selectors,
you have to wrap the export with the radium function basically which you import from the radium package.
So using radium, one way of getting the best of both worlds scoped styles and advance css features like
pseudos selectors and media queries.