we already learned a lot about the react basics over the last lectures our applications still can use some extra styling. For example, those Person components would be nice if they would look like cards and therefore be more like closed objects right now we can’t see the difference or we cannot see the borders between components.
So styling te component is obviously something super important and right now there are two ways of styling we can implement , I will show you both
first of all let’s add Person.css in src/Person folder

.Person{
  width:60%;
  margin: 16px auto;
  border: 1px solid #eee;
  box-shadow: 0 2px 3px #ccc;
  padding: 16px;
  text-align: center;
}

So we will define a class with the name Person. Still we could use this any where in our application since it is global but by using our component name we can rule out the danger of and accidentally using it somewhere else.
Now will assign the .Person class to the Person component inside a div

import React from 'react';
const person = props => {
	return (
		<div className="Person">
			 ...
		</div>
	);
};
export default person;

Now when you save all your files and load the app in browser…. no styles are applied.

Well, because we created our CSS class in Person.css but by default, this is maybe something you didn’t know because it’s not necessarily intuitive but by default, no file is included into our project into the code which gets created by build workflow.
You always have to import files to add them to the game.
So in App component we import the Person component in our App.js file and we also import the App.css file there.
Now it might look strange to import a CSS file into a javascript, But thanks to wabpack which is build tool which is in end used by this react script package.
Importing CSS file in react will not merge those two files i.e. CSS and JS or anything like that. It is just made aware of that CSS file and will handle that differently, it will import into our HTML file.

Import CSS in React Component

So in our person component we will import the Person.css file.

import React from 'react';
import './Person.css';      // Imported CSS file
const person = props => {
	return (
		 ...
	);
};
export default person;

Now after saving all the files and run the application in the browser you can see the style is been applied to our Person component.

Inline Styles In React

Let’s now style the button differently, I want to style the button with something which is called Inline Styles. there is nothing wrong with using CSS file and classes and that might even be the preferred way. But what you also often see in react apps is that you actually design your styles in javascript.
now in App.js will go into render() method in which we have implemented a button and inside that will create a new const variable names as style. the name is upto you and that will be the javascript object and as yu might be aware the CSS style properties have javascript representation. for example { backgroundColor: '#ededed' } camel case instead of a dash because {background-color : '#ededed'} would be invalid.

...
class App extends Component {
	 ...
	render() {
		const style = {
			background: '#ededed',
			font: 'inherit',
			border: '1px solid black',
			padding: '8px',
			borderRadius: '4px',
			boxShadow: '0 2px 3px #ccc',
      cursor:'pointer',
		};
		return (
			<div className="App">
				<h1> Heading</h1>
        <button style={style} onClick={this.switchNameHandler}> {/* Adding dynamic Inline Style */}
					Switch Name
				</button>
				 ...
		);
	}
}
export default App;

Since its not a style property , its a normal variable that wil never change that constant of that render method.

Now its doesn’t change upon hovering and styling that hover effect is hard when using inline styles. this is one restriction already bit I got a whole module in this course where I’ll show you some clever solutions to styling react components which really can be something you can put a lot of thought into it.
Always be aware you can’t use a CSS file, then the styles defined in CSS files are global. so if we change the button style using button{ ... } there all the buttons in our whole app will be changed.
so it might not be what you want but on the other hand, you can use normal CSS syntax or you use inline style as you see in the above example then the styling is scoped to the component or to the element you added to. but you have some restrictions of not being able to leverage the full power of CSS.

React introduction
React Component