There are many ways you can style react component you can use are Inline CSS and there are many React Libraries like typestyle which is good but there have some other flaws in it like it forces you to write CSS in javascript object means if you want to write CSS as
background-color:red you would have to write as backgroundColor:'red' like this which seems very weird but if you use styled component is very simple and also it allows use style react in plain CSS

First, we gonna create new project by using create-react-app CL which allows us to create new project

create-react-app new_project

this will create the new project for us

now we need to install styled component library we would do

yarn add styled-components

now we have styled-component we can use it in our project

class App extends React.Component {
    render(){
      return <section className="container">
             <h2 class="heading">Hello</h2>
             <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque placeat nemo, unde assumenda molestiae sint quod ea cupiditate eos temporibus adipisci praesentium, ipsam laudantium rem corporis voluptate omnis architecto quas.</div>
       </section>
    }
}

Now let us gradually style each element in this App component

first I am going to import styled from "styled-components"

//this is how you create an element and add styled to it

Inside here you can simply copy paste any CSS it will just work you don't have to convert into javascript object I have simply copy-pasted container CSS in here

const Container = styled.section`
  background-color: #ddd;
  color: white;
`

the last step we have to simply replace it with that dom element and we also remove container class

class App extends React.Component {
render(){
return

Hello


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque placeat nemo, unde assumenda molestiae sint quod ea cupiditate eos temporibus adipisci praesentium, ipsam laudantium rem corporis voluptate omnis architecto quas.


}
}

that's it so simple to style react components with styled-components

but wait there is more you can add props to it

Hello

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque placeat nemo, unde assumenda molestiae sint quod ea cupiditate eos temporibus adipisci praesentium, ipsam laudantium rem corporis voluptate omnis architecto quas.
 ```

you can access name prop in Section and add style accordingly

below code, we are checking if the name is "react" then apply green color otherwise the red color is applied

 <Container name="react">
          <h2 class="heading">Hello</h2>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque placeat nemo, unde assumenda molestiae sint quod ea cupiditate eos temporibus adipisci praesentium, ipsam laudantium rem corporis voluptate omnis architecto quas.</div>
 </Container>

const Container = styled.section`
  background-color: ${props => props.name === "react" ? "green" : "red"};
  color: white;
`

we can do similar thing do h2 and div

const Heading = styled.h2`
 color: black;
 font-size: 21px;
 text-align: center;
 padding: 3px;
`

const Content = styled.div`
  color: #eee;
  font-size: 18px;
  border: 1px solid #ccc;
  padding: 12px;
`

now replace Heading with h2 and div with Content

 <Section>
    <Heading>Hello</Heading>
    <Content>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque placeat nemo, unde assumenda molestiae sint quod ea cupiditate eos temporibus adipisci praesentium, ipsam laudantium rem corporis voluptate omnis architecto quas.</Content>
 </Section>

Source Code: https://codesandbox.io/s/6v931j7o6z