Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Using Emotion CSS-in-JS Library in React Applications

🎯 What Will You Learn in This Guide?​

In this guide, you will learn step by step how to use the Emotion library, a powerful CSS-in-JS solution, in your React applications.
We will be creating dynamic styles, prop-based themes, and reusable components with both the @emotion/react and @emotion/styled packages.
This way, you will be able to easily manage conditional styles, nested selectors and theme variables.

🧠 Technical Summary​

CriterionDescription
Main Technical TopicStyle management in React components with the Emotion CSS-in-JS library
Which Problem Does It Solve?It facilitates complex, dynamic and nested styles that cannot be done with React's basic style prop
Technical PurposeMaking your code more modular, manageable and performant

⚙️ 1. Project Setup and Installation of Emotion Packages​

First, create the React project and install the necessary Emotion dependencies.

npx create-react-app genixnode-emotion-stil
cd genixnode-emotion-stil
npm install @emotion/react@11.1.4 @emotion/styled@11.0.0

💡 These commands install the two core packages required for the React version of Emotion.

2. CSS Prop Usage​

Emotion provides the css prop to directly style HTML elements. It can be used in both object and template literal form.

Open src/App.js:


/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function App() {
  return (
    <div>
      {/* Nesne şeklinde css kullanımı */}
      <div css={css({
        margin: 10,
        padding: 10,
        backgroundColor: '#eee',
      })}>
        Bu örnek `css` prop'unu nesneyle kullanır.
      </div>

      {/* Template literal ile css kullanımı */}
      <div css={css`
        margin: 10px;
        padding: 10px;
        background-color: #eee;
      `}>
        Bu örnek `css` prop'unu şablonla kullanır.
      </div>
    </div>
  );
}

export default App;

💬 /** @jsxImportSource @emotion/react */ tells Babel to compile JSX with Emotion.

🧩 3. Using styled Components​

For more advanced and reusable styles you can use the @emotion/styled package.


import styled from '@emotion/styled';

// bg ve fg prop'larıyla dinamik renk alan başlık bileşeni
const Baslik = styled('h1')`
  background-color: ${props => props.bg || '#333'};
  color: ${props => props.fg || '#fff'};
  padding: 10px;
  border-radius: 4px;
`;

function App() {
  return (
    <div>
      <Baslik bg="#008f68" fg="#fae042">
        Yeşil zemin, sarı metin.
      </Baslik>
      <Baslik>Varsayılan renklerle başlık</Baslik>
    </div>
  );
}

The 🪄 styled function converts HTML tags into React components and allows you to add props-based styles.

🔁 4. Component Expansion (withComponent)​

You can reuse an existing component with a different HTML tag.


// Baslik bileşeninin h2 olarak versiyonu
const AltBaslik = Baslik.withComponent('h2');

function App() {
  return (
    <div>
      <AltBaslik fg="#6db65b">
        H2 etiketi olarak render edilen alt başlık.
      </AltBaslik>
    </div>
  );
}

This method avoids style repetition and allows you to create consistent design.

🧱 5. Default and Advanced Styles​

Emotion allows you to overwhelm default values by combining multiple objects.


// Varsayılan fontWeight 100, weight prop'u ile ezilebilir
const Kaynak = styled('cite')(
  { fontWeight: 100 },
  props => ({ fontWeight: props.weight })
);

// !important örneği
const AltBilgi = styled('footer')`
  border-top: 1px solid #ccc;
  margin-top: 40px !important;
  padding-top: 10px;
  color: #777;
`;

function App() {
  return (
    <>
      <Kaynak>Varsayılan metin</Kaynak>
      <Kaynak weight=&#123;700&#125;>Kalın metin</Kaynak>
      <AltBilgi>Sayfa alt bilgisi</AltBilgi>
    </>
  );
}

⚠️ !important is not generally recommended, but can be used for style priority in special cases.

🧠 6. Assembled Example of the Entire Structure​


/** @jsxImportSource @emotion/react */
import &#123; css &#125; from '@emotion/react';
import styled from '@emotion/styled';

const Baslik = styled('h1')`
  background-color: ${props => props.bg};
  color: ${props => props.fg};
  padding: 15px;
  border-radius: 5px;
`;

const AltBaslik = Baslik.withComponent('h2');
const Alinti = styled('blockquote')(props => ({ fontSize: props.size, margin: '20px 0' }));
const Kaynak = styled('cite')({ fontWeight: 100 }, props => ({ fontWeight: props.weight }));
const AltYazi = styled('footer')`
  border-top: 1px solid #ccc;
  color: #888;
  margin-top: 40px !important;
  padding-top: 20px;
`;

function App() {
  return (
    <div css={css`background: #f4f4f4; padding: 20px;`}>
      <Baslik bg="#008f68" fg="#fae042">Gelişmiş Emotion Stilleri</Baslik>
      <AltBaslik fg="#3b82f6">Dinamik React Bileşenleri</AltBaslik>
      <Alinti size=&#123;26&#125;>Bunu <code>@emotion/react</code> ile kodladım!</Alinti>
      <Kaynak weight=&#123;700&#125;>GenixNode Ekibi</Kaynak>
      <AltYazi>Bulut Teknolojileri & Stil Yönetimi</AltYazi>
    </div>
  );
}

export default App;

🎨 This example shows css prop, styled components, default values and extended tags together.

💬 Frequently Asked Questions (FAQ)​

  1. Why should Emotion be preferred over traditional CSS?

Emotion defines styles with the component. It prevents style conflicts, preserves the modular structure and increases performance.

  1. Is there theme support?

Yes! You can define global themes and dynamicize color palettes with ThemeProvider and useTheme hook.

  1. What is the difference between css prop and styled?

css prop is for rapid prototyping; styled, on the other hand, provides component-based, permanent styling solutions.

  1. Is the use of !important recommended?

Not unless it's necessary. However, it can be used in special priority situations.

  1. Is it compatible with SSR (Server-Side Rendering)?

Yes. Emotion is fully compatible with SSR frameworks such as Next.js.

🏁 Result​

In this guide, you learned how to use the Emotion library in React and create modern, modular and performant styles with css prop and styled components.

💡 Now you can try this structure in your React project on GenixNode and give your applications a professional look!