Styling React Components: CSS, Inline Styles, and CSS-in-JS (JSS)

In React projects, styles are of great importance not only visually but also in terms of code architecture.
In this guide, you will learn three different methods:

• 🎨 Plain CSS (classic method)
• ⚙️ Inline Styles (dynamic structure with JavaScript objects)
• ⚡ JSS (CSS-in-JS) (modern, isolated and scalable approach)

We will implement each method step by step through an Alert component.

🧠 What Will You Learn?

• Getting to know React components with different styling methods
• Preventing style conflicts (name conflicts)
• Make dynamic and prop-based color/border assignments
• Generating unique class names with CSS-in-JS

---

🧱 1. Project Setup and File Structure

First, create an empty React project:

npx create-react-app genixnode-stil-rehberi
cd genixnode-stil-rehberi

Delete unnecessary files for a clean start:

rm src/logo.svg src/App.test.js src/index.css

Simplify src/App.js:

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

function App() {
  return <></>;
}

export default App;

Then get the components into an organized folder structure:

mkdir src/components
mkdir src/components/App
mv src/App.* src/components/App

Update the path in index.js:

import App from './components/App/App';

---

🎨 2. Styling with Plain CSS

It is a classic but still powerful method. Let's create a new component:

mkdir src/components/Uyari

alert.js

import React from 'react';
import PropTypes from 'prop-types';
import './Uyari.css';

export default function Uyari({ children, title, type }) {
  return (
    <div className={`uyari-cerceve $&#123;type&#125;`}>
      <h2>&#123;title&#125;</h2>
      &#123;children&#125;
    </div>
  );
}

Uyari.propTypes = {
  title: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
};

Warning.css

.uyari-cerceve {
  padding: 15px;
  margin-bottom: 15px;
}

.uyari-cerceve > h2 {
  margin: 0 0 10px 0;
}

.uyari-cerceve.hata {
  border: 1px solid #f56260;
}

.hata > h2 {
  color: #f56260;
}

.uyari-cerceve.basarili {
  border: 1px solid #6da06f;
}

.basarili > h2 {
  color: #6da06f;
}

💡 Using .warning-cerceve > h2 only targets direct child elements and avoids style conflicts.

---

⚙️ 3. Inline Styles (With JavaScript Objects)

With this method you can define all styles directly within the component. Everything is controlled with JavaScript objects — CSS collisions become impossible.

alert.js

import React from 'react';
import PropTypes from 'prop-types';

export default function Uyari({ children, type, title }) {
  const renkler = {
    basarili: '#6da06f',
    hata: '#f56260',
  };

  const stiller = {
    cerceve: {
      border: `1px solid ${renkler[type]}`,
      padding: 15,
      marginBottom: 15,
    },
    baslik: {
      color: renkler[type],
      margin: '0 0 10px 0',
    },
  };

  return (
    <div style={stiller.cerceve}>
      <h2 style={stiller.baslik}>&#123;title&#125;</h2>
      &#123;children&#125;
    </div>
  );
}

With inline styles, JavaScript variables are converted directly to CSS values. However, rules like :hover or @media are not supported.

---

⚡ 4. Modern Styling with CSS-in-JS

JSS renders dynamic styles in isolation and generates unique class names.

Installation:

npm install react-jss

alert.js

import React from 'react';
import PropTypes from 'prop-types';
import { createUseStyles } from 'react-jss';

const renkler = {
  basarili: '#6da06f',
  hata: '#f56260',
};

const useStyles = createUseStyles({
  cerceve: ({ type }) => ({
    border: `1px solid ${renkler[type]}`,
    padding: 15,
    marginBottom: 15,
  }),
  baslik: ({ type }) => ({
    color: renkler[type],
    margin: [0, 0, 10, 0],
  }),
});

export default function Uyari({ children, type, title }) {
  const siniflar = useStyles({ type });

  return (
    <div className={siniflar.cerceve}>
      <h2 className={siniflar.baslik}>&#123;title&#125;</h2>
      &#123;children&#125;
    </div>
  );
}

The call useStyles({ type }) generates unique component-specific class names (for example: .cerceve-jss-23a5). This completely eliminates the risk of style clashes.

---

💬 Frequently Asked Questions (FAQ)

1. Which method is better?

Plain CSS → Fast in small projects.

Inline Style → No overlap but limited.

JSS → Modern, scalable and prop-based for large projects.

2. Why is camelCase needed?

Hyphenated key names such as margin-bottom are not valid in JavaScript objects. That's why marginBottom is written.

3. How does JSS avoid style conflicts?

It adds a unique hash to each created class (e.g. title-jss-a2b7) so it doesn't interfere with other CSS rules.

4. How does px conversion work in inline styles?

Numeric values ​​(padding: 20) automatically become px. But for units like percentage, em or rem you need to use string (like "20%)".

5. Is there a performance difference?

Yes. CSS files are faster with browser cache. JSS is more dynamic but adds a bit more runtime overhead.

---

🚀 Result

Style management in React projects varies depending on size and flexibility:

Method	Advantage	Disadvantage
CSS	Fast and simple	Risk of conflict
Inline	Conflict-free	Limited feature support
JSS	Dynamic and modular	Slight runtime cost

💡 JSS or Styled Components are preferred in large-scale projects. For small and simple applications, classic CSS is still a strong option.

Switch to a high-performance style development environment by hosting your React projects on GenixNode.