So now that you learned how to dynamically set styles and classes, let's go back to the limitations of
inline styles learn about. Most important for us right now,
the fact that we can't assign a hover style for our button. Hover which in css you would simply
create with :hover is a pseudo selector which means it's a selector based on some other selector
indicated by that colon.
Now we can't assign this in our current application, there we got our style javascript object where we
assign or create some styles for the button but hover,
yes, how would we set it up here, right?
Hover is not a css property.
So we could fix this of course by styling the button in the css file but I already mentioned that this style
would then not be scoped to this component only and all the buttons in our application would get the
styling.
Yes, we could work around this with some unique css IDs or classes but having the possibility of using
these inline styles here can also be pretty cool because as we already do, you can edit them in your
code because everything is javascript. So it would be nice if we could actually use pseudo selectors
and media
queries in our normal javascript inline styles,
and by default that's of course not possible, but we can add a third party package which is pretty popular
to add this functionality to our application,
so let's do just that.
For that, we need to install a new package
and here I open my normal terminal on my Mac or on Windows it would be the command prompt,
this is just a terminal integrated into Microsoft visual studio code,
you can also open the options via integrated terminal.
Now this is the same terminal you have on your machine
if you access it normally but automatically navigate it your project folder and there I will now
install a package with npm install.
I'll add --save to also save an entry in package.json so that we also fix the version number
and can easily share our project,
and then the package is called radium.
Simply hit enter now and this will download and add this package to the project so that we can start
using it.
Radium is a popular package for react which allows us to use inline styles with pseudo selectors and
media queries,
so pretty awesome.
Now that it is installed, we can close the terminal again and we can start using it. Now, to start using
it,
we first of all have to import it in the file we want to use it
and this could be any of your files, could be the app.js
file, could be the person file too of course.
Let's work in the app.js file though because there is a button where I want to add a hover state. To be
able to do this,
I first of all need to import radium.
So add import statement here, position doesn't matter but it should be at the top of the file,
I'll import radium from radium,
this is the syntax you can use.
Now with that imported, you can scroll all the way down where you export your app and there you can call
radium as a function and wrap your app with it.
Now this is called a higher order component,
something we will also create in our course project later.
It might look super fancy but in the end it's just a component wrapping your component adding kind of
injecting some extra functionality,
in this case some extra syntax which will parse your styles and understand some extra features you can
now start using.
You can use this on both components created with class and extends component as well as functional components,
so there if we add radium by importing radium from radium, we can also export radium person here,
both works.
Now with that added, we can start adding or using some new features and we of course do this in our style
because radium is all about styles.
Here are a style which will get assigned to the button in the end.
I want to add a hover style and with radium added and wrapping your export, you can simply add a new
property ":hover" or any other pseudo selector.
All pseudo selectors are supported,
you need to wrap them in quotation marks though because since they start with a colon, they are not
valid javascript property names, as strings as they are though. As you know, you can create javascript
properties as strings or if you don't have an invalid character in them
just as we did before like all these other properties.
Now the value simply is your set of styles for the hover state
so another javascript object where I will now set the background color to light green for the green button
and the color of the text to black
maybe. And I will also of course overwrite hover down there where I overwrite my background color, there
I will simply set style and now not dot hover because it's a string,
we need to use square brackets.
So here we then assign a new value, a new javascript object where we use light red and black text, like
this.
With this, we're using a radium feature. Being able to assign a property which is a valid css pseudo
selector
and taking advantage of radium to still have it work.
Now if you save this and all the other files and you reload your application, if you hover over the button,
you'll see the change styling, also for the red button though there it's not overwriting it to light red,
so let's try a different color.
Salmon does work,
so light red didn't exist but if I changed to salmon now, it works too.
So this is pretty cool because now you have the best of both worlds,
you have the normal css pseudo selectors you can add and you still have scoped styles which you can
easily edit from within your javascript code, as you can see here.
Now radium doesn't limit you to using pseudo selectors as we did,
you can also add media queries.
Let's maybe do this in the person component and let's do it in the next lecture.