Styling React Using CSS

Styling means adding design like color size layout

1 Inline Styling

What is Inline Style

Style is written directly inside JSX

javascript

function App() {

  return <h1 style={{ color: "red" }}>Hello</h1>
}

Important Points

Use double curly braces
First for JSX second for object
Use camelCase
Example backgroundColor not background-color

Using Style Object

javascript

function App() {
  const style = {
    color: "white",
    backgroundColor: "blue"
  }

  return <h1 style={style}>Hello</h1>
}

2 CSS Stylesheet

Write CSS in separate file

javascript

h1 {
  color: red;
}

Import CSS Use in Component

javascript

import "./style.css"

function App() {
  return <h1>Hello</h1>
}

Easy to use
Good for global styling

3. CSS Modules

CSS Modules are CSS files that work only for one component
They prevent style conflicts
No class name conflict
Better for large projects
Clean and maintainable code

Create CSS Module : File name must be

css

Button.module.css

Example CSS

plaintext

.mybutton {
  color: white;
  background: blue;
}

Import CSS Module and Use in Component

plaintext

import styles from "./Button.module.css"

function App() {
  return <button className={styles.mybutton}>Click</button>
}

Class name becomes unique automatically
No conflict with other components

Multiple Classes

javascript

.primary {
  background: blue;
}

.secondary {
  background: gray;
}

javascript

<button className={`${styles.primary}`}>Primary</button>
<button className={`${styles.secondary}`}>Secondary</button>

Combine Classes

javascript

<button className={`${styles.mybutton} ${styles.primary}`}>
  Button
</button>

Global Class

plaintext

:global(.title) {
  color: red;
}

javascript

<h1 className="title">Hello</h1>

Local + Global

plaintext

:global(.title) {
  color: red;
}

.text {
  color: blue;
}

CSS Modules work per component
File name must be module css
Import as styles
Use styles.className
No style conflict
Can use global if needed

React CSS in JS

What is CSS in JS

CSS in JS means writing CSS inside JavaScript
No separate CSS file needed

Why use CSS in JS

Write CSS in JS file
Styles are only for that component
No class name conflict
Can use dynamic styles

Install styled components

javascript

npm install styled-components

plaintext

import styled from "styled-components"

const Title = styled.h1`
  color: red;
  background: blue;
`

function App() {
  return <Title>Hello</Title>
}

styled is used to create component
CSS is written inside backticks
Looks like normal CSS

Dynamic Styles using Props

javascript

const Button = styled.button`
  background: ${props => props.type === "primary" ? "blue" : "gray"};
  color: white;
`

javascript

<Button type="primary">Primary</Button>
<Button>Default</Button>

Style changes based on props

Extend Styles

javascript

const Button = styled.button`
  padding: 10px;
`

const PrimaryButton = styled(Button)`
  background: blue;
`

const SuccessButton = styled(Button)`
  background: green;
`

Reuse styles and add changes

Component Scoped Style

Styles only work in that component
No conflict with other components

Global Styles

javascript

import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
  body {
    background: black;
    color: white;
  }
`

javascript

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Hello</h1>
    </>
  )
}