I'm back in the project we worked on thus far.
We get some basic styling in there,
for example these cards where we output the persons and this button.
But let's start with that button for example,
we already have one issue, when we hover over it,
it doesn't change that style.
The problem is that this button which is part of our app component we can see it here in our template
there, that this button simply is styled with inline styles, we assign them here and we set them up earlier
in the render method here.
We use javascript to create an object and assigned that to the style property and jsx and react takes
care about setting this on the actual html element.
The issue is we can't use pseudos selectors here.
The advantage of course is the styling is only applied to this button and to no other button in the
application if we had another button. And I already mentioned the alternative would be to style it in
the css file and there we can use normal css including pseudo selectors like hover but this would then
globally affect all buttons in our application, even if they were placed in other components.
This the problem set I want to deal with in this module but besides that, I also want to have a look
at something else.
What if we actually want to change styling dynamically?
Let's start with that, let's say Toggle Persons, this button should have a green background color
if we are about to show persons with a click and a red background color
if we are about to remove the person list. Let's see how we can dynamically change styles in the next
lecture.