How to CSS Style in React

To style your React application, CSS plays an important role in that. The style property is the most useful quality for styling in React applications, which includes powerfully processed styles at render time. It acknowledges a JavaScript object in camelCased properties as opposed to a CSS string.

There are mainly four ways to style the React application:

• Inline Styling
• CSS Module
• Styled component
• CSS Stylesheet

Inline Styling

Inline styling is also known as Inline CSS. It is used for style an element with the inline style attribute. We don't have to characterize some other styled part or CSS records since we can pass all the styles as objects to the JSX's HTML component. They're also a drawback i.e. JSX gets indiscernible because all the style is jumbled inside your HTML labels. That is the reason you will just observe inline styles in ordinary React projects.

class App extends React.Component {
render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Tutorial Link</h1>
      </div>
    );
  }
}

Since the inline CSS is written in a JavaScript object, properties with two names, similar to background-color, must be written with camel case syntax.

class App extends React.Component {
render() {
    return (
      <div>
      <h1 style={{backgroundColor: "lightblue"}}>Tutorial Linkh1>
      </div>
    );
  }
}

CSS StyleSheet

You can write your CSS styling in a separate file, just save the file with the .css file extension.

App.js

class App extends React.Component {  
  render() {  
    return (  
      <div>  
      <h1> Tutorial Link </h1>  
      </div>  
    );  
  }  
}  
export default App;  

App.CSS

body {  
  background-color: #008080;  
  color: Red;  
  padding: 60px;  
  font-family: Calibri;  
  text-align: center;  
}  

Styled Component

It is a library of React. It is written in both JavaScript and CSS, used to enhance the styling React component system in the application.

To install in you react application: npm install styled-components --save 

class App extends React.Component {  
  render() {  
    const Div:any = styled.div`  
            margin: 30px;  
            border: 5px dashed green;  
            &:hover {  
            background-color: ${(props:any) => props.hoverColor};  
            }  
            `;  
    const Title = styled.h1`  
            font-family: Verdana;  
            font-size: 60px;  
            text-align: center;  
            color: green;  
            `;  
  
    return (  
       <div>            
            <Title>Tutorial Link</Title>  
            <p></p> 
        </div>  
    );  
  }  
}  
export default App;  

CSS Module

CSS Modules are helpful for components that are put in different files. The CSS inside a module is accessible just for the component that imported it, and you don't need to stress over name clashes and save the file with a .css extension. You can create CSS Module with the .module.css extension like a myStyles.module.css name.

.mystyle {  
  background-color: #cdc0b0;  
  color: Red;  
  padding: 20px;  
  font-family: Verdana;  
  text-align: center;  
}