DEV Community 👩‍💻👨‍💻

Cover image for Styling in React JS
Irshad Ali
Irshad Ali

Posted on

Styling in React JS

Inline Styling

Inline styles are nothing new,they are a HTML feature that we've all most likely used at some point. However,implementing inline styles in React is
slightly different,we store the values as objects.

Inline object definition

<div style={{backgroundColor: "green" }}> IRSHAD ALI </div>
Enter fullscreen mode Exit fullscreen mode

Object literal definition

const divStyle = {backgroundColor: "green" }
<div sstyle={divStyle}> IRSHAD ALI </div>
Enter fullscreen mode Exit fullscreen mode

Whilst inline style are often used when applying conditional style, they are often not the best choice when more than one element requires the same
styling.

CSS & CSS Pre-processors

Whilst the process of using vanilla CSS or a CSS pre-processor is the same in React, there are a couple of notable differences. When applying
classes to elements, we use the 'className' syntax rather then 'class'. We also link our stylesheet using the @import syntax.

For CSS

import React from 'react'
import './App.css'

const App = () => {
  return <Dogs/>
  }
export default App;
Enter fullscreen mode Exit fullscreen mode

CSS Modules

CSS Modules are simply .css file in which all CSS style and animation are defined. With an exception all of the style declared are locally
scoped to the Component they are imported into.

.dogSounds{
font-size: 1.5rem;
color: green;
text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

All CSS style for one component are declared in one file.

import React from 'react'
import style form "./dog.css";

const Dog = () => {
  return <h1 style={style.dogSounds}> woof</h1>
}

export default Dog;
Enter fullscreen mode Exit fullscreen mode

CSS-in-JS Libraries

CSS-in-JS and inline style are extremely similar. However with inline styles React attaches the style to the DOM nodes,where as CSS-IN-JS libraries
take your styles and inject them into a <style> tag in the DOM.

npm install --save styled-components
Enter fullscreen mode Exit fullscreen mode

Can also b declared in another file and impored in

import styled from 'styled-components

const Title = styled,h1`
  font-size: 1.5em;
  color: green;
  text-align: center;
  `;

  **//IN COMPONENT**
Enter fullscreen mode Exit fullscreen mode
  <Title>
    Heloo World!
  </Title>
Enter fullscreen mode Exit fullscreen mode

Thank's To @TheTraveling.Dev

Top comments (0)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.