5 Ways to Style React Components

1. INLINE CSS

         In inline styling basically, create objects of style and render it inside the components in style attribute using the React technique to incorporate JavaScript variable inside the JSX using ‘{}’.

2. NORMAL CSS

        In the External CSS styling technique, you basically create an external CSS file for each component and do the required styling of classes and use those class names inside the components.

 

3. REACT-JSS

        JSS bills itself as “an authoring tool for CSS which allows us to use JavaScript to describe the style in a declarative, conflict-free, and reusable way.

        It’s framework agnostic but when it comes to styling React components, React-JSS integrates JSS with React using the new Hooks API.

4. STYLED COMPONENTS

    The styled components allow us to style the CSS under the variable created in JavaScript. The styled component is a third-party package using which we can create a component as a JavaScript variable that is already styled with CSS code and use that styled component in our main components.

 

5. CSS MODULES

        CSS module is a simple CSS file but a key difference is by default when it is imported every class name and animation inside the CSS module is scoped locally to the components that are importing it also CSS file name should follow the format  “filename.module.css”.