Hackforge Academy

Explanation

Inline styling in React allows you to apply CSS directly inside JSX using a JavaScript object. Property names use camelCase instead of hyphen-case.

Code:

function App() {
  return (
    <h1 style={{ color: 'blue', fontSize: '24px' }}>
      Hello React
    </h1>
  );
}

Explanation

External CSS styling is the most common method. Create a separate CSS file and import it into your component.

Code:

import './App.css';

function App() {
  return <h1 className="title">Hello React
</h1>;
}

Explanation

CSS Modules help avoid class name conflicts by locally scoping styles to the component.

Code:

import styles from './App.module.css';

function App() {
  return <h1 className={styles.title}>
Hello React</h1>;
}

Explanation

Conditional styling allows styles to change dynamically based on state or props.

Code:

function App() {
  const isActive = true;

  return (
    <h1 style={{ color: isActive ? 'green' :
 'red' }}>
      Status Text
    </h1>
  );
}

Explanation

Styled-components is a popular library that enables writing CSS directly inside JavaScript using tagged template literals.

Code:

import styled from 'styled-components';

const Title = styled.h1`
  color: purple;
  font-size: 28px;
`;

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

Explanation

Tailwind CSS can be used in React to apply utility-first styling directly through className attributes.

Code:

function App() {
  return (
    <h1 className="text-blue-500 text-2xl 
font-bold">
      Hello React
    </h1>
  );
}

Explanation

Dynamic class names can be applied using template literals or libraries like clsx for cleaner conditional styling.

Code:

function App() {
  const isActive = true;

  return (
    <h1 className={`title ${isActive ? 
'active' : ''}`}>
      Hello React
    </h1>
  );
}