Intro

In this module, I want to focus on styling react components because there’s more to it than what you solve thus far. For one I want to have a look at how you can dynamically adjust styles or class names and I also want to show you how to work around this restriction of ever using inline style and hence having scoped styles but having limitations like not being able to use media queries or pseudo selectors or using CSS files and that having global styles there are couple of ways of handling this and will dive into all of these ways of working with styles in this Course module.

The Problem Set

I am back in the project we worked on thus far. we got some basic styling in there, for example, these cards where we output the persons and the button.
Let’s start with the button, for example, we already have one issue when we hover over it, it doesn’t change the style.
As we were using jsvsdcript object to create a style in JSX code then React care about setting that object to the actual HTML element. The uissue is we cant use pseudos selectors there.

...
render(){
  const style = {
    background: '#ededed',
    font: 'inherit',
    border: '1px solid black',
    padding: '8px',
    borderRadius: '4px',
    boxShadow: '0 2px 3px #ccc',
  };
  return (
    <div className="App">
      <button style={style} onClick={this.togglePersonsHandler}>
        Toggle Person
      </button>
    </div>
  );
}
...

this advantage of core is the styling only applies on ut to that button and not to other buttons on the application if we had another button, and I already mentioned the alternative would be to style it in CSS file and there we can use normal CSS including pseudo selector button:hover{} but this will globally affect all buttons in our application even they are placed in other components.
this is 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 want to change the styling dynamically, Let’s start with that.

Lets say Toggle Person button should have green backrgound 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.
Lets see how we can dynamically change styles in the next lesson…

React introduction
React Component