styled-components vs polished vs styled-system vs emotion
CSS-in-JS Kütüphaneleri
Search packages..
styled-componentspolishedstyled-systememotionSimilar Packages:

CSS-in-JS Kütüphaneleri

CSS-in-JS kütüphaneleri, JavaScript içinde CSS yazmayı sağlayarak stil yönetimini daha dinamik ve bileşen tabanlı hale getirir. Bu kütüphaneler, stil bileşenlerini doğrudan bileşenlerle birleştirerek, stilin bileşen yaşam döngüsü ile senkronize olmasını sağlar. Bu, özellikle React gibi bileşen tabanlı kütüphanelerle birlikte kullanıldığında, stilin yönetimini ve yeniden kullanılabilirliğini artırır.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
styled-components14,938,96241,0472.18 MB2225 days agoMIT
polished13,738,0277,6642.8 MB333 years agoMIT
styled-system1,139,003---7 years agoMIT
emotion981,595---6 years agoMIT

Feature Comparison: styled-components vs polished vs styled-system vs emotion

Dinamik Stil Yönetimi

  • styled-components:

    Styled-components, bileşen bazlı bir yaklaşım sunarak, her bileşenin kendi stilini tanımlamasına olanak tanır. Bu, stilin bileşen ile birlikte yönetilmesini sağlar ve bileşenlerin yeniden kullanılabilirliğini artırır.

  • polished:

    Polished, mevcut stil tanımlarınıza ek fonksiyonlar ekleyerek stil yönetimini daha da dinamik hale getirir. Örneğin, renk dönüşümleri veya boyut hesaplamaları gibi yardımcı fonksiyonlar sunar.

  • styled-system:

    Styled-system, stil bileşenlerinizi dinamik olarak oluşturmanıza olanak tanır. Örneğin, responsive tasarım için farklı stil değerleri tanımlayabilir ve bunları bileşenlerinizde kullanabilirsiniz.

  • emotion:

    Emotion, stil bileşenlerini dinamik bir şekilde oluşturmanıza olanak tanır. Stil tanımlarını JavaScript içinde yazabilir ve bileşenlerin durumuna göre stilleri değiştirebilirsiniz. Bu, kullanıcı etkileşimlerine anlık tepki verebilen dinamik arayüzler oluşturmanıza yardımcı olur.

Performans

  • styled-components:

    Styled-components, stil tanımlarını bileşen bazında yöneterek, yalnızca gerekli bileşenlerin yeniden render edilmesini sağlar. Bu, performansı artırır ve gereksiz stil yüklemelerini önler.

  • polished:

    Polished, performans üzerinde doğrudan bir etki yaratmaz, ancak mevcut stil kütüphanelerinin performansını artırmak için yardımcı fonksiyonlar sunar. Bu, stil yönetimini daha verimli hale getirebilir.

  • styled-system:

    Styled-system, stil bileşenlerinizi optimize ederek, yalnızca gerekli stil değerlerini yükler. Bu, performansı artırır ve stil yönetimini daha verimli hale getirir.

  • emotion:

    Emotion, stil tanımlarını optimize ederek yüksek performans sunar. CSS sınıflarını yalnızca gerekli olduğunda oluşturur ve bu da gereksiz stil yüklemesini önler.

Öğrenme Eğrisi

  • styled-components:

    Styled-components, bileşen tabanlı stil yazımını öğrenmek isteyenler için iyi bir başlangıçtır. Ancak, bileşenlerin nasıl çalıştığını anlamak için biraz zaman harcamanız gerekebilir.

  • polished:

    Polished, mevcut stil çözümlerine ek olarak kullanıldığından, öğrenme eğrisi oldukça düşüktür. Mevcut stil kütüphanenizi kullanarak Polished'ı kolayca entegre edebilirsiniz.

  • styled-system:

    Styled-system, responsive tasarım ve tema yönetimi konularında bilgi sahibi olmayı gerektirir. Bu nedenle, öğrenme eğrisi diğer kütüphanelere göre biraz daha yüksektir.

  • emotion:

    Emotion, esnek bir API sunar ve JavaScript bilgisi olan geliştiriciler için öğrenmesi kolaydır. Ancak, bazı gelişmiş özellikleri kullanmak için daha fazla bilgi gerektirebilir.

Temalar ve Stil Sistemleri

  • styled-components:

    Styled-components, temalar oluşturmanıza olanak tanır. Bileşenlerinizi temalarla birlikte kullanarak, stil tutarlılığını artırabilirsiniz.

  • polished:

    Polished, temalar oluşturmak için doğrudan bir özellik sunmaz, ancak mevcut stil kütüphanelerine ek olarak kullanılabilir. Bu, temalarınızı daha esnek hale getirebilir.

  • styled-system:

    Styled-system, stil sistemleri oluşturmak için idealdir. Responsive tasarım ve tema yönetimi için güçlü bir yapı sunar.

  • emotion:

    Emotion, temalar oluşturmanıza ve bunları bileşenlerinizde kullanmanıza olanak tanır. Bu, stil tutarlılığını artırır ve projelerinizde daha iyi bir kullanıcı deneyimi sağlar.

Eklentilik

  • styled-components:

    Styled-components, bileşen bazlı yapısı sayesinde genişletilebilir. Yeni stil bileşenleri oluşturmak ve mevcut bileşenleri özelleştirmek oldukça kolaydır.

  • polished:

    Polished, mevcut stil kütüphanelerine ek özellikler eklemek için tasarlanmıştır. Bu, stil yönetimini daha da zenginleştirir.

  • styled-system:

    Styled-system, stil bileşenlerinizi genişletmek için esnek bir yapı sunar. Bu, özelleştirilmiş stil sistemleri oluşturmanıza olanak tanır.

  • emotion:

    Emotion, diğer kütüphanelerle kolayca entegre edilebilir. Ekstra özellikler eklemek için genişletilebilir bir yapıya sahiptir.

How to Choose: styled-components vs polished vs styled-system vs emotion

  • styled-components:

    Styled-components, bileşen tabanlı stil yazımında güçlü bir yapı sunar. Eğer projenizde bileşenlerinizi stilize etmek için bir çözüm arıyorsanız ve CSS'in bileşenlerle birlikte yönetilmesini istiyorsanız, bu kütüphane uygun bir tercihtir.

  • polished:

    Polished, mevcut stil çözümlerine ek olarak kullanılabilecek bir yardımcı kütüphanedir. Eğer zaten bir stil kütüphanesi kullanıyorsanız ve bu kütüphaneye ek özellikler eklemek istiyorsanız, Polished iyi bir seçimdir.

  • styled-system:

    Styled-system, stil sistemleri oluşturmak için idealdir. Eğer responsive tasarım ve tema yönetimi ile ilgileniyorsanız, bu kütüphane, stil bileşenlerinizi daha esnek hale getirir.

  • emotion:

    Emotion, stil yazımında esneklik ve performans arayan geliştiriciler için idealdir. CSS özelliklerini doğrudan JavaScript içinde kullanma imkanı sunar ve stil bileşenlerinin dinamik olarak oluşturulmasını sağlar.

Similar Npm Packages to styled-components

styled-components React uygulamaları için bir CSS-in-JS kütüphanesidir. Geliştiricilerin bileşen bazlı stiller oluşturmasına olanak tanır ve bu stilleri bileşenlerin kendisiyle birlikte tanımlayarak, stil yönetimini daha modüler ve okunabilir hale getirir. styled-components kullanarak, CSS stillerini JavaScript içinde tanımlayabilir ve bileşenlerinize dinamik stiller ekleyebilirsiniz. Ancak, styled-components dışında da benzer işlevsellik sunan başka kütüphaneler bulunmaktadır. İşte bazı alternatifler:

  • emotion CSS-in-JS kütüphanesi olarak, stil oluşturma ve yönetme konusunda esneklik ve performans sunar. emotion, hem stil bileşenleri oluşturmanıza hem de CSS sınıfları kullanarak stiller tanımlamanıza olanak tanır. Yüksek performansı ve esnek yapısıyla, büyük ölçekli uygulamalarda bile stil yönetimini kolaylaştırır. Eğer stil yönetiminde daha fazla esneklik ve performans arıyorsanız, emotion iyi bir alternatif olabilir.
  • styled-jsx Next.js ile birlikte gelen bir CSS-in-JS kütüphanesidir. Bileşen bazlı stiller oluşturmanıza olanak tanırken, stillerinizi bileşenlerinize özgü hale getirir. styled-jsx, özellikle Next.js projelerinde kullanıldığında, sayfa bazlı stil yönetimi için oldukça etkilidir. Eğer Next.js kullanıyorsanız ve bileşen bazlı stiller oluşturmak istiyorsanız, styled-jsx iyi bir seçenek olabilir.

Daha fazla bilgi için karşılaştırma sayfasını ziyaret edin: styled-components vs emotion vs styled-jsx karşılaştırması.

Similar Npm Packages to polished

polished bir CSS yardımcı kütüphanesidir ve stil bileşenleri ile birlikte kullanılmak üzere tasarlanmıştır. React uygulamalarında stil oluşturmayı kolaylaştıran bir dizi yardımcı işlev sunar. polished, stil bileşenlerini daha verimli ve okunabilir hale getirmek için renk manipülasyonu, medya sorguları ve diğer CSS özellikleri üzerinde çalışmanıza olanak tanır. Ancak, polished'ın yanı sıra benzer işlevsellik sunan başka kütüphaneler de bulunmaktadır. İşte bazı alternatifler:

  • emotion CSS-in-JS yaklaşımını benimseyen bir kütüphanedir. Performans odaklı ve esnek bir stil yazım deneyimi sunar. emotion, stil bileşenleri oluşturmayı ve dinamik stiller uygulamayı kolaylaştırır. Eğer uygulamanızda CSS-in-JS kullanmayı düşünüyorsanız, emotion güçlü bir seçenek olacaktır. Ayrıca, emotion ile birlikte polished kullanarak stil bileşenlerinizi daha da geliştirebilirsiniz.
  • styled-components da bir CSS-in-JS kütüphanesidir ve bileşen tabanlı stil yazımını teşvik eder. styled-components, JavaScript dosyalarınızda stil tanımlamanıza olanak tanır ve bileşenlerinizi daha modüler hale getirir. Eğer bileşen tabanlı bir yaklaşım benimsemek istiyorsanız, styled-components mükemmel bir tercihtir. polished ile birlikte kullanıldığında, stil bileşenlerinizi daha da özelleştirmenize yardımcı olabilir.
  • styled-system ise stil bileşenleri oluştururken sistematik bir yaklaşım sunar. styled-system, stil bileşenlerinizi daha tutarlı ve yeniden kullanılabilir hale getirmek için bir dizi yardımcı işlev ve tema desteği sağlar. Eğer uygulamanızda stil sistemleri oluşturmayı planlıyorsanız, styled-system iyi bir seçenek olabilir. polished ile birlikte kullanarak stil bileşenlerinizi daha da güçlendirebilirsiniz.

Daha fazla bilgi için karşılaştırmayı inceleyin: Comparing emotion vs polished vs styled-components vs styled-system.

Similar Npm Packages to styled-system

styled-system React uygulamaları için bir stil yönetim kütüphanesidir. Tasarım sistemleri oluşturmayı ve uygulamayı kolaylaştıran bir dizi yardımcı işlev ve bileşen sunar. styled-system, stil bileşenlerini oluştururken, temalar ve responsive tasarım gibi kavramları kolayca yönetmenizi sağlar. Ancak, styled-system'a alternatif olarak kullanılabilecek başka kütüphaneler de mevcuttur:

  • emotion CSS-in-JS yaklaşımını benimseyen bir stil kütüphanesidir. emotion, stil bileşenlerini tanımlamak için güçlü ve esnek bir API sunar. Performansı artırmak için stil kurallarını optimize eder ve dinamik stiller oluşturmayı kolaylaştırır. Eğer CSS-in-JS kullanarak stil yazmayı tercih ediyorsanız, emotion mükemmel bir seçimdir.
  • styled-components bir diğer popüler CSS-in-JS kütüphanesidir. Bileşen bazlı stil yazımını teşvik eder ve stil tanımlarını bileşenlerle birleştirerek daha okunabilir bir kod yapısı sağlar. styled-components, stil bileşenlerini tanımlarken JavaScript'in gücünden yararlanarak dinamik stiller oluşturmanıza olanak tanır. Eğer bileşen tabanlı bir yaklaşım arıyorsanız, styled-components harika bir seçenek olacaktır.
  • theme-ui React uygulamaları için tasarlanmış bir stil kütüphanesidir ve özellikle tema yönetimi üzerine odaklanmıştır. theme-ui, stil bileşenlerini oluştururken temalar ve responsive tasarım gibi kavramları kolayca yönetmenizi sağlar. Eğer uygulamanızda tema yönetimi ve stil bileşenleri arasında sıkı bir entegrasyon arıyorsanız, theme-ui iyi bir alternatif olabilir.

Daha fazla bilgi için karşılaştırma sayfasını ziyaret edin: emotion vs styled-components vs styled-system vs theme-ui karşılaştırması.

Similar Npm Packages to emotion

emotion React uygulamaları için bir CSS-in-JS kütüphanesidir. Geliştiricilere stil yazımında esneklik ve performans sunarak, bileşen tabanlı bir yaklaşım benimsemelerine olanak tanır. Emotion, stil bileşenlerini doğrudan JavaScript dosyalarında tanımlamaya imkan verirken, aynı zamanda dinamik stil oluşturma yeteneği de sunar. Ancak, emotion'a alternatif olabilecek başka kütüphaneler de bulunmaktadır. İşte bazıları:

  • sass CSS'in bir ön işleyicisidir ve daha karmaşık stil yapıları oluşturmayı kolaylaştırır. Sass, değişkenler, iç içe geçmiş kurallar ve mixin'ler gibi özellikler sunarak, stil sayfalarını daha modüler ve yeniden kullanılabilir hale getirir. Eğer projenizde geleneksel CSS yapısını tercih ediyorsanız ve daha fazla yapılandırma ve esneklik istiyorsanız, Sass iyi bir seçenek olabilir.
  • styled-components bir başka popüler CSS-in-JS kütüphanesidir. React bileşenleri ile stil tanımlamayı birleştirerek, stilleri bileşenlerle ilişkilendirir. Bu, bileşenlerinizi daha okunabilir ve yönetilebilir hale getirir. Styled-components, dinamik stiller oluşturma yeteneği ile birlikte, bileşen bazlı stil yönetimi için güçlü bir araçtır. Eğer bileşen tabanlı bir yaklaşım arıyorsanız, styled-components mükemmel bir seçimdir.
  • styled-jsx Next.js ile birlikte gelen bir CSS-in-JS kütüphanesidir. Bileşen bazlı stiller oluşturmanıza olanak tanırken, aynı zamanda stil kapsülleme sağlar. Styled-jsx, özellikle Next.js projelerinde kullanışlıdır ve bileşenlerinize özgü stiller tanımlamanızı kolaylaştırır. Eğer Next.js kullanıyorsanız ve bileşen bazlı bir stil yönetimi arıyorsanız, styled-jsx iyi bir alternatif olabilir.

Daha fazla bilgi için karşılaştırmayı inceleyin: emotion vs sass vs styled-components vs styled-jsx karşılaştırması.

README for styled-components


Fast, expressive styling for React.
Server components, client components, streaming SSR, React Native—one API.

npm downloads gzip size

styled-components is largely maintained by one person. Please help fund the project for consistent long-term support and updates: Open Collective

Style React components with real CSS, scoped automatically and delivered only when needed. No class name juggling, no separate files, no build step required.

  • Works everywhere React runs. Server components, client components, streaming SSR, and React Native—same API, automatic runtime detection.
  • Full CSS, no compromises. Media queries, pseudo-selectors, nesting, keyframes, global styles. If CSS supports it, so does styled-components.
  • TypeScript-first. Built-in types ship with the package. Props flow through to your styles with full inference—no @types install, no manual generics.
  • <13kB gzipped. Small enough to disappear in your bundle. No build plugin required.

Install

npm install styled-components
pnpm / yarn 
pnpm add styled-components

yarn add styled-components

Quick examples

Dynamic props

Vary styles based on component props. Prefix transient props with $ to keep them off the DOM.

import styled from 'styled-components';

const Button = styled.button<{ $primary?: boolean }>`
  background: ${props => (props.$primary ? 'palevioletred' : 'white')};
  color: ${props => (props.$primary ? 'white' : 'palevioletred')};
  font-size: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

<Button>Normal</Button>
<Button $primary>Primary</Button>

Extending styles

Build variants on top of existing styled components.

const TomatoButton = styled(Button)`
  background: tomato;
  color: white;
  border-color: tomato;
`;

Polymorphic as prop

Swap the rendered element without changing styles.

// Renders a <a> tag with Button styles
<Button as="a" href="/home">Link Button</Button>

Pseudos and nesting

Use & to reference the component's generated class name—works with pseudo-classes, pseudo-elements, and nested selectors.

const Input = styled.input`
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;

  &:focus {
    border-color: palevioletred;
    outline: none;
  }

  &::placeholder {
    color: #aaa;
  }
`;

Animations

Define @keyframes once, reference them across components. Names are scoped automatically.

import styled, { keyframes } from 'styled-components';

const rotate = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;

const Spinner = styled.div`
  animation: ${rotate} 1s linear infinite;
  width: 40px;
  height: 40px;
  border: 3px solid palevioletred;
  border-top-color: transparent;
  border-radius: 50%;
`;

Theming

Share design tokens across your app via React context. Every styled component receives props.theme.

import styled, { ThemeProvider } from 'styled-components';

const theme = {
  fg: 'palevioletred',
  bg: 'white',
};

const Card = styled.div`
  background: ${props => props.theme.bg};
  color: ${props => props.theme.fg};
  padding: 2em;
`;

<ThemeProvider theme={theme}>
  <Card>Themed content</Card>
</ThemeProvider>

RSC-compatible themes

createTheme turns your tokens into CSS custom properties. Class name hashes stay stable across theme variants—no hydration mismatch when switching light/dark.

import styled, { createTheme, ThemeProvider } from 'styled-components';

const { theme, GlobalStyle: ThemeVars } = createTheme({
  colors: {
    fg: 'palevioletred',
    bg: 'white',
  },
  space: {
    md: '1rem',
  },
});

const Card = styled.div`
  color: ${theme.colors.fg};       /* var(--sc-colors-fg, palevioletred) */
  background: ${theme.colors.bg};
  padding: ${theme.space.md};
`;

// Render <ThemeVars /> at the root to emit the CSS variable declarations
// Pass the theme to ThemeProvider for stable hashes
<ThemeProvider theme={theme}>
  <ThemeVars />
  <Card>Token-driven content</Card>
</ThemeProvider>

Shared styles with css

Extract reusable style blocks to share across components or apply conditionally.

import styled, { css } from 'styled-components';

const truncate = css`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const Label = styled.span`
  ${truncate}
  max-width: 200px;
`;

Styling third-party components

Wrap any component that accepts a className prop.

import styled from 'styled-components';
import { Link } from 'react-router-dom';

const StyledLink = styled(Link)`
  color: palevioletred;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
`;

Global styles

Inject app-wide CSS like resets and font faces. Supports theming and dynamic updates.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
  }
`;

// Render <GlobalStyle /> at the root of your app

Attrs

Set default or static HTML attributes so consumers don't have to.

const PasswordInput = styled.input.attrs({
  type: 'password',
  placeholder: 'Enter password',
})`
  border: 1px solid #ccc;
  padding: 0.5em;
`;

Documentation

Community

Contributing guidelines | Code of Conduct | awesome-styled-components

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! [Become a backer]

Sponsors

Support this project by becoming a sponsor. [Become a sponsor]

Acknowledgements

This project builds on earlier work by Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson, and Andrey Sitnik. Special thanks to @okonet for the logo.

License

Licensed under the MIT License, Copyright © 2016-present styled-components contributors. See LICENSE for details.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.